嵌套布局:

  在一行中,有三列,每一列都有对应的BS栅格系统中的格子,以下例中因为 .row中的div对应的class分别是span4,span4,span4,所以其每一列对应的格子数是

  4,4,4

  现在有一个需求,要在第三列中另外再布局出2列,且这2列宽度相同那么操作如下:看彩色部分

    <div class='row'>

      <div class='span4'>

        <h2>栏目一</h2>

        <p>段落1</p>

      </div>

      <div class='span4'>

        <h2>栏目二</h2>

        <p>段落2</p>

      </div>

      <div class='span4'>

        <h2>栏目三</h2>     

        <p>段落3</p>

        <!--这里是嵌套布局-->
        <div class='row'>
          <div class='span2'>嵌套3.1</div>
          <div class='span2'>嵌套3.2</div>
        </div>

      </div>

    </div>

注意:

  固定布局下的嵌套布局(求格子和)

    第三列的格子数是4,那么在其中的列的格子数的总和不能大于4

  流动布局下的嵌套布局(按百分比计算12/6)

    第三列的格子数是4,但是流动布局下按照百分比计算,要平均分配的话,因该是12/6才可以所以以上的嵌套部分在流动布局下为

    <div class='row'>
      <div class='span6'>嵌套3.1</div>
      <div class='span6'>嵌套3.2</div>
    </div>

Bootstrap页面布局4 - 嵌套布局的更多相关文章

  1. Bootstrap~页面的布局

    回到目录 Bootstrap作为支持响应式布局的一个前端插件,确实发挥着重要的作用,无论你是在手机,平板还是PC上浏览网页,都能达到不错的效果,这一切一切,都是bootstrap带给我们的! 今天主要 ...

  2. bootstrap学习总结-02 网格布局

    1  网格布局 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. <!DOCTYPE html> ...

  3. 转:Bootstrap研究 精巧的网格布局系统

    本网格布局系统属于Scaffolding(框架,布局)部分.在Scaffolding里面有(固定)网格布局(Grid System)和流式网格布局(Fluid Grid System).本文讨论第一种 ...

  4. 前端开发工程师 - 04.页面架构 - CSS Reset & 布局解决方案 & 响应式 & 页面优化 &规范与模块化

    04.页面架构 第1章--CSS Reset 第2章--布局解决方案 居中布局 课堂交流区 水平列表的底部对齐 如图所示,一个水平排列的列表,每项高度都未知,但要求底部对齐,有哪些方法可以解决呢? & ...

  5. web页面之响应式布局

    一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网 ...

  6. QDockWidget嵌套布局详解-实现Visual Studio布局

    概述 许多工程软件,如Qt Creator,VS,matlab等,都是使用dock布局窗口,这样用户可以自定义界面,自由组合窗口. Qt的嵌套布局由QDockWidget完成,用Qt Creator拖 ...

  7. 移动端页面开发适配 rem布局原理

    主题 HTML移动端页面开发适配 rem布局原理 什么是适配,为什么要适配 我们拿到的设计图一般是以640,750,1080分辨率为基准设计的,而现在的手机终端各式各样,分辨率不同,逻辑像素不同 ,适 ...

  8. 手机端页面自适应解决方案—rem布局进阶版

    手机端页面自适应解决方案—rem布局进阶版   https://www.jianshu.com/p/985d26b40199 注:本文转载之处:https://www.cnblogs.com/anni ...

  9. 从零開始学android&lt;使用嵌套布局实现计算器界面.十七.&gt;

    所谓的嵌套布局就是在一个文件里嵌套多个布局文件 <span style="font-size:18px;"> <LinearLayout android:layo ...

随机推荐

  1. 如何从Apache官网下载windows版apache服务器

    参考文章:http://jingyan.baidu.com/article/29697b912f6539ab20de3cf8.html

  2. 最新版Duilib在VS2012下编译错误的解决方法

            svn了好几次最新版本的项目源代码, 在VS2012下编译老是出错, 改了后没记录, 结果又忘记, 所以在此记录下.        这个问题很普遍, 非常多的人遇到.       至于 ...

  3. mac 下修改Hosts文件

    最近Google网站老是打不开,具体原因大家都明白,不过修改Hosts文件后,就能访问了,也算不上原创,网上一搜就能找到,自己操作记录下,希望有刚接触Mac 系统的童鞋有帮助. 第一步:打开Finde ...

  4. wp8 入门到精通 动画

    http://samples.msdn.microsoft.com/Silverlight/SampleBrowser/index.htm#/?sref=transforms_ovw_animatin ...

  5. 在C# 6中实践模式匹配

    模式匹配(Pattern Matching)是F#中非常好用的一种语言特性.估计很多人都希望在C#中能用到这样的特性. 一句话解释一下模式匹配就是:创建一个函数可以接受和处理不同类型的表达式(包括不同 ...

  6. Codeforces Round #350 (Div. 2) F. Restore a Number 模拟构造题

    F. Restore a Number   Vasya decided to pass a very large integer n to Kate. First, he wrote that num ...

  7. 3.PopupWindow 、拍照、裁剪

    实现这样的效果 圆角图片的自定义控件直接拷进来,和com一个等级 想要弹出内容可以使用悬浮窗 layout_pupup <LinearLayout xmlns:android="htt ...

  8. SignalR —— Asp.net RealTime的春天

    一般的例子:http://www.asp.net/signalr/overview/signalr-20/getting-started-with-signalr-20/tutorial-gettin ...

  9. 游戏 window

    using UnityEngine; using System.Collections; public class YY : MonoBehaviour { ,,,); ,,,); // Use th ...

  10. BZOJ3919 : [Baltic2014]portals

    预处理出每个点上下左右能延伸到的最远点以及到它们的距离的最小值md. 然后spfa,一个点除了可以以1的代价到达四周的点之外,还可以以md+1的代价到达四个方向能到达的最远点. #include< ...