bootstrap中经常遇到的问题.pdf

Bootstrap
1 布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我
们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这column）的组合来创建页面布局，
你的内容就可以放入这些创建好的布局中。下面就介绍一
下 Bootstrap 栅格系统的工作原理：
 “行（row）”必须包含在 .container （固定宽度）
-fluid （100% 宽度）中，以便为其赋予合适的排
列（aligment）和内补（padding）。
 通过“行（row）”在水平方向创建一组“列（column）”。
 你的内容应当放置于“列（column）”内，并且，只有“列（column）”
可以作为行（row）”的直接子元素。
 类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅
格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义
化的布局。 通过为“列（column）”设置 padding 属性，从而创建列与列之
间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而
抵消掉为 .container 元素设置的 padding，也就间接为“行
（row）”所包含的“列（column）”抵消掉了 padding。
 负值的 margin 就是下面的示例为什么是向外突出的原因。在
栅格列中的内容排成一行。
 栅格系统中的列是通过指定 1 到 12 的值来表示其跨越的范围。
例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
 如果一“行（row）”中包含了的“列（column）”大于 12，多余
的“列（column）”所在的元素将被作为一个整体另起一行排列。
 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并
且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任
何 .col-md-<em> 栅格类适用于与屏幕宽度大于或等于分界点
大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元
素上应用任何 .col-lg- 不存在， 也影响大屏幕设备。
1）嵌套列
<divclass="row"><divclass="col-sm-9">
Level 1: .col-sm-9
<divclass="row">
<divclass="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6