根据自举文档
行必须放置在
.container
(固定宽度)或.container-fluid
(全宽度)中。
和
使用行创建列的水平组。
为什么有这个必要?
.row
只能占用.container
或.container-fluid
的最大宽度。
考虑到您必须关闭.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>
发布于 2016-10-10 06:37:12
容器
容器提供响应宽度的宽度约束。当响应大小发生变化时,容器就会发生变化。行和列都是基于百分比的,因此它们不需要更改。请注意,每边有一个15 by边距,按行取消。
行
行应该始终在容器中。
行为列提供了一个居住的地方,理想情况下,列的总和为12。它还充当包装器,因为所有的列都会离开,当浮动变得奇怪时,额外的行不会有重叠。
行的两边也有一个15 on的负边距。组成这一行的div通常会被限制在容器的填充物内,接触粉红色区域的边缘,而不是超出。15 it负边距将行推到容器顶部15 it填充上,实质上是否定的。此外,行确保它中的所有div都出现在它们自己的行上,与前一行和后面的行分开。
列
这些列现在有15 The填充。这个填充意味着列实际上接触到行的边缘,而行本身触及容器的边缘,因为行有负的边距,而容器具有正的填充。但是,列上的填充将列内的任何内容推入需要的位置,并在列之间提供30 be槽。永远不要使用列之外的一行,它是行不通的。
有关更多信息,我建议您阅读这篇文章。这是非常清楚的,并很好地解释了Bootstrap的网格系统是如何工作的。
发布于 2016-10-10 06:38:42
.row元素在两边都有一个负值。所有的列都有一个填充来处理间距,即使是第一个和最后一个(这是我们不想要的),所以.row将它们拉回来修复。此外,我认为在容器中有更多行而不是列更有意义。
https://stackoverflow.com/questions/39960679
复制相似问题