Bootstrap布局容器与栅格系统

布局容器

• Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。
• .container 类用于固定宽度并支持响应式布局的容器。

<div class="container">
  ...
</div>

• .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器，流式布局容器。

<div class="container-fluid">
  ...
</div>

栅格系统

• 每行总列数是12
• 对于多层嵌套的情况，最好一层row，一层col，间隔着紧挨着使用（确定？？？）
• 如果希望每列之间有间隔，可以给每列加一个padding
  • 但是要注意，如果这一列里面还有row类的元素的话，这个padding的值要大于15px，因为row这个class默认就会有margin-left和margin-right为15px
  • 有阴影效果时，table的box-shadow阴影效果在edge上无效，那么就要外面套一层div，然后在div上设置box-shadow阴影效果；然后如果业务上还需要把布局平分为两列且有间隔，每列里面有一个table，这时如果使用了bootstrap的栅格布局，那么两列之间的间距只能使用padding来实现而不能使用margin，但同时box-shadow阴影效果是在边框上的，那么会导致阴影效果和table之间有空白，那么就要在这个div外面再套一层div，外层div有padding，内层div有阴影效果。
• 栅格参数（4.0之后细分成了5个区间）
  • col-xs-适用于超小屏幕 手机 (<576px)
  • col-sm-适用于小屏幕 平板 (≥576px)
  • col-md-适用于中等屏幕 桌面显示器 (≥768px)
  • col-lg-适用于大屏幕 大桌面显示器 (≥992px)
  • col-xl-适用于超大屏幕 超大桌面显示器 (≥1200px)

该用table的时候就用table，不一定非要用div来模拟，当然table外面可以根据需要套一层div。

仅在需要的时候再用栅格系统！！！比如需要按比例动态布局时，不然会带来很多问题，因为会有很多自带的样式。

如果想要每一列的元素（如div）有一个最小宽度，那么可以设置其min-width样式，这样在宽度不够时，第二列会被挤到下一行。