网格布局中,每列的宽度都是一致的。
<div class="container border"> <div class="row border"> <div class="col border"> 1 of 2 </div> <div class="col border"> 2 of 2 </div> </div> <div class="row border"> <div class="col border"> 1 of 3 </div> <div class="col border"> 2 of 3 </div> <div class="col border"> 3 of 3 </div> </div> </div>我们可以通过插入.w-100来创建跨越多行的等宽列。
<div class="container border"> <div class="row border"> <div class="col border">col</div> <div class="col border">col</div> <div class="w-100 border"></div> <div class="col border">col</div> <div class="col border">col</div> </div> </div>自动布局意味着我们可以设置一列的宽度,并且同级列可以自动调整大小。
<!-- 用确定的标签大小来控制div --> <div class="container border"> <div class="row border"> <div class="col border">1 of 3</div> <div class="col-6 border">2 of 3 (wider)</div> <div class="col border">3 of 3</div> </div> <div class="row border"> <div class="col border">1 of 3</div> <div class="col-5 border">2 of 3 (wider)</div> <div class="col border">3 of 3</div> </div> </div>我们使用 col-{breakpoint}-auto可以使列的宽度随着内容的大小而变化。
<!-- 根据文本内容来控制容器大小 --> <div class="container border"> <div class="row justify-content-md-center border"> <div class="col col-lg-2 border">1 of 3</div> <div class="col-md-auto border">Variable width content</div> <div class="col col-lg-2 border">3 of 3</div> </div> <div class="row border"> <div class="col border">1 of 3</div> <div class="col-md-auto border">Variable width content</div> <div class="col col-lg-2 border">3 of 3</div> </div> </div>Bootstrap的网格包括了五层预定义的类,用于构建复杂的响应式布局,可以给不同的设备设置想要的大小,包括超小型,小型,中型,大型,超大型等五种设备。
如果对每一种设备网格要求都是一样的话,请使用.col和.col-*来修饰容器,如果需要变化的话,请使用指定的编号的类别。
<!-- 保证容器在任何大小设备中都能一致,需要使用bootstrap中的类.col-* --> <div class="container border"> <div class="row border"> <div class="col border">col</div> <div class="col border">col</div> <div class="col border">col</div> <div class="col border">col</div> </div> <div class="row border"> <div class="col-8 border">col-8</div> <div class="col-4 border">col-4</div> </div> </div>例如:我们可以使用.col-sm-*类,而被设置的容器将在小设备时堆叠呈水平状态。
<!-- 使用.col-sm-*会使得容器在小设备时行从堆叠变成水平 --> <div class="container border"> <div class="row border"> <div class="col-sm-8 border">col-sm-8</div> <div class="col-sm-4 border">col-sm-4</div> </div> <div class="row"> <div class="col-sm border">col-sm</div> <div class="col-sm border">col-sm</div> <div class="col-sm border">col-sm</div> </div> </div>使列在不同的设备中呈现不同的样子,我们需要对他进行不同类的组合。
<!-- 不同类的组合 --> <div class="container border"> <div class="row border"> <div class="col-md-8 border">col-md-8</div> <div class="col-6 col-md-4 border">col-6 col-md-4</div> </div> <div class="row border"> <div class="col-6 col-md-4">col-6 col-md-4</div> <div class="col-6 col-md-4">col-6 col-md-4</div> <div class="col-6 col-md-4">col-6 col-md-4</div> </div> <!-- 列始终保持50%的宽度 --> <div class="row border"> <div class="col-6">col-6</div> <div class="col-6">col-6</div> </div> </div>我们可以通过设置 .row-cols-* 来快速设置想呈现的内容的列数。
<div class="container border"> <div class="row row-cols-2 border"> <div class="col border">Column</div> <div class="col border">Column</div> <div class="col border">Column</div> <div class="col border">Column</div> </div> </div>我们使用.align-items-*类可以使我们的容器实现垂直对齐。
<!-- 垂直对齐 --> <div class="container border"> <div class="row align-items-start"> <div class="col border">One of three columns</div> <div class="col border">Two of three columns</div> <div class="col border">Three of three columns</div> </div> <div class="row align-items-center"> <div class="col border">One of three columns</div> <div class="col border">Two of three columns</div> <div class="col border">Three of three columns</div> </div> <div class="row align-items-end"> <div class="col border">One of three columns</div> <div class="col border">Two of three columns</div> <div class="col border">Three of three columns</div> </div> </div>我们可以通过设置.justify-content-*类来改变在主轴上的对齐,也就是水平对齐。
<!-- 水平对齐 --> <div class="container border"> <div class="row justify-content-start border"> <div class="col-4 border">One of two columns</div> <div class="col-4 border">One of two columns</div> </div> <div class="row justify-content-center border"> <div class="col-4 border">One of two columns</div> <div class="col-4 border">One of two columns</div> </div> <div class="row justify-content-end border"> <div class="col-4 border">One of two columns</div> <div class="col-4 border">One of two columns</div> </div> <div class="row justify-content-around border"> <div class="col-4 border">One of two columns</div> <div class="col-4 border">One of two columns</div> </div> <div class="row justify-content-between border"> <div class="col-4 border">One of two columns</div> <div class="col-4 border">One of two columns</div> </div> </div>我们可以使用 .no-gutters 类来删除预定义网格中列之间的装订线。
<!-- No gutters --> <div class="row no-gutters"> <div class="col-sm-6 col-md-8 border">col-sm-6 col-md-8</div> <div class="col-6 col-md-4 border">col-6 col-md-4</div> </div>如果有一行中放置的列超过了12列,则每组额外的列将作为一个新单元包装至新行中。
<!-- Column wrapping --> <div class="container border"> <div class="row border"> <div class="col-9 border">col-9</div> <div class="col-4 border"> col-4<br/> since 9 + 4 = 13 > 12, this 4-column-wid div gets wrapped onto a new line as one contigous unit. </div> <div class="col-6 border"> col-6<br/> Subsequent columns continue along the new line. </div> </div> </div>我们可以使用 .order-* 对项目进行可视化排序。
<!-- Order classes --> <div class="container border"> <div class="row border"> <div class="col border">First in DOM, no order applied</div> <div class="col order-12 border">Second in DOM, with a larger order</div> <div class="col order-1 border">Thrid in DOM, with an order of 1</div> </div> </div>我们可以通过.order-first或.order-last来重置DOM中的顺序。
<div class="container border"> <div class="row border"> <div class="col order-last border">First in DOM, ordered last</div> <div class="col border">Second in DOM, uordered</div> <div class="col order-first border">Third in DOM, ordered first</div> </div> </div>