我什么时候应该在Twitter Bootstrap 3中使用容器和行？

Question

我什么时候应该在Twitter Bootstrap 3中使用容器和行？

Cod*_*ark 84 twitter-bootstrap-3

请向我解释何时使用课程container和row.我不确定,因为Bootstrap的文档对这一部分还不太清楚.

我正在使用Bootstrap 3.

Answer 1

Pao*_*llo 91

container是一个row元素的容器.

row 元素是列的容器(文档称之为网格系统)

此外,container设置内容的边距处理布局的响应行为.

因此,container该类通常用于根据Bootstrap项目的样式指南创建"盒装"内容.

如果你想"开箱即用"创建一个全宽网格,你可以只row使用里面有列的元素(总共通常是12个元素).

的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>

Run Code Online (Sandbox Code Playgroud)

对于盒装响应式布局.

如果省略,container您将获得全宽布局.

Jumbotron的例子

Jumbotron就是这种container行为的一个很好的例子.如果在一个container元素中放置一个Jumbotron元素,它将具有圆形边框和基于响应宽度的固定宽度.如果Jumbotron在容器外面,它跨越全宽而没有边框.

@CodeShark这很糟糕，因为它是布局的结构部分。例如，您可能需要全角导航栏和全角页脚，但页面内容是盒装的。 (2认同)

Answer 2

小智 21

我想知道同样的事情并且理解我经历了bootstrap.css第3版.答案在于行号.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;
  }
}

Run Code Online (Sandbox Code Playgroud)

整个代码是自我解释的.然而,为了进一步说明本,容器将采取750px如果屏幕宽度之间768px和992px等作为代码显示.现在,对于超过1200的普通屏幕分辨率,容器将采用1170px,但减去30 px(15px+15px)的填充,左边的有效空间是1140px,当左边和右边的边距设置为自动时,它以屏幕为中心.

现在,如果有class="row",下面是代码:

.row {
  margin-right: -15px;
  margin-left: -15px;
}

Run Code Online (Sandbox Code Playgroud)

因此,如果行在容器内,它将有效地从容器中抓取每侧15px的填充并使用整个空间.但是如果类行位于body标签内,则由于负边距,它会倾向于从可见区域移出到浏览器的左侧和右侧.

我希望它已经明确了.

归档时间：	11 年，11 月前
查看次数：	76538 次
最近记录：	8 年，5 月前