Bootstrap 栅格布局的使用

1. 栅格系统

bootstrap 提供了一套非常强大的系统 —— 响应式、移动设备优先的栅格系统。它可以随着设备或者视口的尺寸大小的增加而适当的扩展列数（最多到12列）。

1.1 工作原理

• 首先，响应式的内容必须要用一个 .container（固定宽度） 或者 .container-fluid（100%宽度） 包裹起来，然后接下来的直接元素必须是 .row 这个类名，这样才会被赋予合适的排列和内补；

• 通过行（row）在水平方向上创建一组 列（column），内容必须要放在列中，只有列才能作为行的直接子元素；

1.2 栅格参数

image

在使用栅格参数时，需要注意：例如当定义了 .col-md-1 时，代表宽度大于 992px 时，这一列将会占用 1/12 的宽度，如果没有定义更大的类 .col-lg ，那当显示器大于 1200px 时，排列的宽度仍会按照 col-md-1 来分配。但是，如果没有定义更小的类，当前元素将会失去栅格的样式，变成一个普通的div（没有浮动、也没有宽度，默认占满一整行）。

1.3 列偏移

由于 bootstrap 3 的栅格布局是通过浮动来实现的，所以当我们一行中有一块未占满一整行，但又需要进行偏移或者居中的元素，就没法通过 marin: 0 auto 或者 text-align: center ，这时就可以使用列偏移来让该列进行偏移。

要进行列偏移，需要在对应的列中添加 col-md-offset-x

<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="html" cid="n17" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><div class="col-md-8 col-md-offset-2">我占了3列</div></pre>

偏移完成后，我们会发现，bootstrap 偏移的原理是通过 margin-left 来实现的，所以 col-md-8 后面的与纳素，也会跟着一起被推开。当偏移量加元素本身的宽度大于12列时，会导致后面的元素进行换行。另外，由于偏移是固定使用 margin-left 属性，所以偏移只能向右偏移。

1.4 列排序

列排序，就是可以将列的显示顺序进行替换。但列排序和列偏移有点不同，就是列偏移是通过 margin-left 来实现的，但是列排序却是通过相对定位来实现的。所以列排序它不会影响到周围元素的布局（会导致元素之间的重叠）。

要实现列排序，只需要通过 col-md-pull 或者 col-md-push 来进行左偏移和右偏移。

<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="html" cid="n22" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><div class="row">
<div class="col-md-9 col-md-push-3"><input type="text" placeholder="username"></div>
<div class="col-md-3 col-md-pull-9"><input type="password" placeholder="password"></div>
</div></pre>