根据Bootstrap的文档
行必须放在.container(固定宽度)或.container-fluid(全角)内
.container
.container-fluid
和
使用行创建 水平 的列组。
为什么这是必要的?
A .row只能占据.container或的最大宽度.container-fluid
.row
鉴于您必须关闭,.row因此似乎要写更长的时间:
<div class="container"> <div class="row"> <div class="col-md-6"> <h1>Column A</h1> </div> <div class="col-md-6"> <h1>Column B</h1> </div> </div> <div class="row"> <div class="col-md-6"> <h1>Column C</h1> </div> <div class="col-md-6"> <h1>Column D</h1> </div> </div> </div>
比这个:
<div class="container"> <div class="col-md-6"> <h1>Column A</h1> </div> <div class="col-md-6"> <h1>Column B</h1> </div> </div> <div class="container"> <div class="col-md-6"> <h1>Column C</h1> </div> <div class="col-md-6"> <h1>Column D</h1> </div> </div>
容器
容器在响应宽度上提供了宽度限制。当响应大小发生变化时,容器会发生变化。行和列均基于百分比,因此无需更改。请注意,每边有15px的边距,被行取消。
行数
行应始终位于容器中。
该行为列提供了一个居住的地方,理想情况下,列的总数为12。它还可以作为包装器使用,因为所有列都向左浮动,当浮动变得怪异时,其他行不会重叠。
行的每边也有15px的负边距。组成该行的div通常会被限制在容器的填充内部,而不是粉红色区域的边缘,但不能超出。15px的负边距将行压到容器顶部15px的填充上方,从而使行基本无效。此外,行确保您其中的所有div都显示在自己的行上,与上一行和下一行分开。
列
列现在具有15px的填充。这种填充意味着列实际上接触行的边缘,由于行具有负边距,而容器具有正的填充,列本身就接触容器的边缘。但是,列上的填充将列内的任何内容推入所需的位置,并且在列之间提供了30px的装订线。切勿在行外使用列,否则将无法使用。
有关更多信息,建议您阅读本文 。很清楚,并且很好地解释了Bootstrap的网格系统如何工作。