Bootstrap中.row的用途是什么？

根据Bootstrap's documentation Bootstrap中.row的用途是什么？

行必须放在一个.container（固定宽度）内或.container-fluid（全宽）

和

使用行创建水平专栏组。

为什么这是必要的？

一个.row只能占据既然你必须关闭它似乎更长的时间来写.row任.container或.container-fluid

最大宽度：

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

'.container'可以包含多个'row'。例如你想要一个带有3个“col”的“行”和一个带有5个“col”的行。每一个'col's你把它们包装在一个'row'里面，然后''container'里面的'row's。这是关于分离项目和有一个整洁的结构。 –

集装箱

容器在响应宽度上提供宽度约束。当响应大小发生变化时，容器会发生变化。行和列都是基于百分比的，所以他们不需要改变。请注意，每边有15px的边距，被行取消。

行

行应始终在一个容器中。

该行为列提供了一个可以居住的地方，理想情况下列中的列可以合计为12.它也充当包装器，因为所有的列浮动左边，其他行浮动时变得没有重叠。

行的每边也有15px的负边距。组成该行的div通常会被限制在容器的填充内，触及粉红色区域的边缘，但不会超出。 15px的负边缘将行推出容器顶部的15px填充，实质上否定它。此外，行确保您内部的所有div都出现在自己的行上，与上一行和下一行分开。

列

的栏目有15px的填充。此填充意味着列实际上会触及行的边缘，该行本身会触及容器的边缘，因为该行具有负边距，并且容器具有正填充。但是，列上的填充将列内的任何内容推送到需要的位置，并且还在列之间提供30像素的装订线。切勿在行外使用列，否则无法工作。

欲了解更多信息，我建议您阅读this article。它非常清楚，并且很好地解释了Bootstrap的网格系统是如何工作的。

来源

2016-10-10 14:37:12 Mistalis

虽然容器具有全宽度，但行通常指定了“max-width”。比行还清除里面的浮动，还有很多其他的东西你可以考虑，作为背景图像，内部元素的进一步定位等。没有必要，也许不需要，但在框架中计划和推荐。 – skobaljic

@Mistalis感谢您的详细解释。您提供的文章链接非常好。我建议任何人阅读那篇文章，如果他们有这个相同的问题。那里的图表非常有用。 – Andy

很高兴我帮助:) – Mistalis

.row元素在两边都有负边距。所有的列都有一个填充关注间隔，即使是第一个和最后一个（这是我们不想要的），所以.row将它们拉回来解决这个问题。另外，我认为在容器中放置更多行而不是列会更有意义。

来源

2016-10-10 14:38:42

Bootstrap中.row的用途是什么？

回答

相关问题