- 首页
- 前端开发
- Bootstrap 中 .row 的目的是什么?
Bootstrap 中 .row 的目的是什么?
[英] What is the purpose of .row in Bootstrap?
本文介绍了Bootstrap 中 .row 的目的是什么?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
根据 Bootstrap 的文档
<块引用>
行必须放置在 .container(固定宽度)或 .container-fluid(全宽度)内
和
<块引用>
使用行来创建水平的列组.
为什么需要这样做?
一个 .row 只能占据 .container 或 .container-fluid
的最大宽度
鉴于您必须关闭 .row 似乎更长的时间写:
<div class="row"><div class="col-md-6"><h1>A列</h1>
<div class="col-md-6"><h1>B列</h1>
<div class="row"><div class="col-md-6"><h1>C列</h1>
<div class="col-md-6"><h1>D列</h1>
比这个:
<div class="col-md-6"><h1>A列</h1>
<div class="col-md-6"><h1>B列</h1>
<div class="容器"><div class="col-md-6"><h1>C列</h1>
<div class="col-md-6"><h1>D列</h1>
解决方案
容器
容器提供响应宽度的宽度限制.当响应大小发生变化时，容器也会发生变化.行和列都是基于百分比的，因此它们不需要更改.请注意，每边有 15px 的边距，按行取消.
<小时>行
行应始终位于容器中.
该行为列提供了一个居住的地方，理想情况下，列加起来为 12.它还充当包装器，因为所有列都向左浮动，当浮动变得奇怪时，额外的行不会重叠.
行的每一侧也有 15px 的负边距.组成该行的 div 通常会被限制在容器的内边距内，接触粉红色区域的边缘但不会超出.15px 负边距将行推出容器 15px 填充的顶部，基本上否定它.此外，行确保其中的所有 div 都出现在自己的行上，与前一行和后一行分开.
<小时>列
列现在有 15 像素的填充.这种填充意味着列实际上接触行的边缘，行本身接触容器的边缘，因为行具有负边距，而容器具有正填充.但是，列上的填充会将列内的任何内容推到需要的位置，并在列之间提供 30 像素的间距.切勿在行外使用列，否则将不起作用.
<小时>有关更多信息，我建议您阅读这篇文章.讲得很清楚，很好地解释了 Bootstrap 的网格系统是如何工作的.
According to Bootstrap's documentation
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width)
and
Use rows to create horizontal groups of columns.
Why is this necessary?
A .row can only occupy the maximum width of either .container or .container-fluid
Given that you have to close the .row it seems longer to write:
<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>
Than this:
<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>
解决方案
Container
The container provide the width constraints on responsive widths. When the responsive sizes change, it’s the container that changes. Rows and columns are all percentage based so they don’t need to change.
Note that there is a 15px margin on each side, canceled by rows.
Rows
Rows should always be in a container.
The row provides the columns a place to live, ideally having columns that add up to 12. It also acts as a wrapper since all the columns float left, additional rows don’t have overlaps when floats get weird.
Rows also have a 15px negative margin on each side. The div that makes up the row would normally be constrained inside of the container's padding, touching the edges of the pink area but not beyond. The 15px negative margins push the row out over top of the containers 15px padding, essentially negating it. Furthermore, rows ensure you that all of the divs inside of it appear on their own line, separated from the previous and the following rows.
Columns
The columns now have 15px padding. This padding means that the columns actually touch the edge of the row, which itself touches the edge of the container since the row has the negative margin, and the container has the positive padding. But, the padding on the column pushes anything inside the column in to where it needs to be, and also provides the 30px gutter between columns. Never use a column outside of a row, it won’t work.
For more information, I suggest you to read this article. It is really clear, and explain well how Bootstrap's grid system works.
这篇关于Bootstrap 中 .row 的目的是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
