什么时候应该在Twitter Bootstrap 3中使用容器和行？
请向我解释何时使用类container和row 。 我不确定，因为Bootstrap的文档对这部分还不太清楚。
我正在使用Bootstrap 3。
container是row元素的容器。
row元素是列的容器（文档称之为网格系统）
此外， container设置处理布局响应行为的内容边距。
因此， container类通常用于根据Bootstrap项目的样式指南创build“盒装”内容。
如果你想“开箱即用”创build一个全宽网格，你可以只使用内部有列的row元素（跨越通常的12cols）。
container和row类用于正文中的元素。 所以基本的布局是：
<html> <body> <div class="container"> <div class="row"> <div class="col-md-xx"></div> ... </div> <div class="row"> <div class="col-md-xx"></div> ... </div> </div> </body> </html>
对于盒装响应式布局。
如果你省略了container你会得到一个全宽的布局。
Jumbotron的例子
Jumbotron是container行为的一个很好的例子。 如果将Jumbotron元素放在container元素中，则它具有圆angular边框和基于响应宽度的固定宽度。 如果Jumbotron在一个容器之外，它跨越无边界的全angular。
我在想同样的事情，并理解我通过了版本3的bootstrap.css 。答案在于从第一行开始。 1585到1605.我会在这里张贴这些线以便更好地理解，如下所示。
.container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } @media (min-width: 768px) { .container { width: 750px; } } @media (min-width: 992px) { .container { width: 970px; } } @media (min-width: 1200px) { .container { width: 1170px; } }
整个代码是自我解释的。 然而，要详细说明这一点，如果屏幕宽度在992px之间，代码显示容器将会花费750px 。 现在，对于大于1200的常见屏幕分辨率，容器将花费1170px ，但减去30 px （15 15px+15px ）的填充，剩余的有效空间为1170px 15px+15px ，屏幕中心为左右边距设置为自动。
现在，在class="row"情况下，有下面的代码：
.row { margin-right: -15px; margin-left: -15px; }
所以，如果行在容器内部，它将有效地从容器中抓取每边15px的填充并使用全部空间。 但是，如果类行位于body标签内，则由于负边距，它往往会从可见区域移出浏览器的左侧和右侧。
我希望已经说清楚了。
容器
容器在响应宽度上提供宽度约束。 当响应大小发生变化时，容器会发生变化。 行和列都是基于百分比的，所以他们不需要改变。 请注意，每边有15像素的边距，被行取消。
行
行总是在一个容器中。
该行为列提供了一个生活的地方，理想情况下，列的总和可以达到12.它也充当包装器，因为所有的列浮动左边，当浮动变得奇怪时，额外的行没有重叠。
行的两边还有一个15px的负边距。 组成该行的div通常会被限制在容器填充内，触及粉红色区域的边缘，但不会超出。 15px的负边距将容器顶部的15px填充，实质上是否定的。 此外，行确保您所有的div内部都出现在自己的行上，与上一行和下一行分开。
列
列现在有15px的填充。 这种填充意味着列实际上触及行的边缘，因为行具有负余量，所以它本身接触到容器的边缘，并且容器具有正填充。 但是，列上的填充将列内的任何内容推到需要的位置，并且还在列之间提供了30像素的装订线。 切勿在行外使用列，否则无法工作。
欲了解更多信息，我build议你阅读这篇文章 。 这真的很清楚，并且很好地解释Bootstrap的网格系统是如何工作的。
类“容器”将内容包装到视口中心。 带有body标签的整个内容可以放置在页面中心显示指定宽度的页面的结果中。
当需要将内容连续放置在列中时，使用类“行”，每行最多可以有12列。
在传统的CSS实践中，您可能会使用以下类：
wrapper, header, navigator, contents, footer
上面的类的用法可以像这样：
<body> <div class="wrapper"> <div class="header"> </div> <div class="navigator"> </div> <div class="content"> </div> <div class="footer"> </div> </div> </body>
在bootstrap中可以使用，如果你愿意，或者如果你习惯上面的模板引导类就像这个例子：
<body> <div class="container"> <div class="col-md-12"> <h1>Header</h1> <p>Header contents goes here</p> </div> <div class="col-md-12"> <nav role="navigation" class="nav navbar"> <h1>Navigation</h1> <p>Navigation contents goes here</p> </nav> </div> <div class="col-md-12"> <div class="pagination"> <h1>Page contents</h1> <p>Webpage contents goes here</p> </div> </div> <div class="col-lg-12"> <h1>Footer contents</h1> <p>footer contents goes here</p> </div> </div> </body>
对于行类，如果要为页面devise表格式布局，则可以使用行类，但是当要以表格格式显示数据时，应该使用表类，但表格不会响应。
要创build与数据表不同的表格式布局，请使用行类，如下例所示：
<body> <div class="container"> <div class="row"> <div class="col-sm-4" >.col-sm-4</div> <div class="col-sm-4" >.col-sm-4</div> <div class="col-sm-4" >.col-sm-4</div> </div> </div> </body>
您必须尽量避免使用基于表格的布局，并尝试使用此处所述的响应表格
你需要使用.container ，当你需要创build固定的块，布局。
.row我们使用它在我们的容器里面有响应的内容。
.container类具有屏幕的默认值：small – 750px，medium – 970px，large – 1170px。
