使用Bootstrap 4行内的多行 [英] Multiple rows inside a row with Bootstrap 4
问题描述
我正在尝试使用Bootstrap创建一个全宽页面。我有类似这样的设置：
< body>
< div class =container-fluid>
< div class =row>
第一行放在这里
< / div>
< div class =row>
第二行放在这里
< / div>
< div class =row>
第三行在这里
< / div>
< / div>
< / body>
如果我想在一行内创建一行，我该怎么做？这是我想要实现的：
< body>
< div class =container-fluid>
< div class =row>
< div class =row text-center>
< h1>某些标题< / h1>
< / div>
< div class =row>
< div class =col-md-2>< / div>
< div class =col-md-4>
网格可能
< / div>
< div class =col-md-4>
更多网格
< / div>
< div class =col-md-2>< / div>
< / div>
< / div>
< / div>
< / body>
所以基本上我想把标题放在一行上，把一些网格放在另一行上。这里最棘手的部分是，我想在中间放置4列宽的列，然后在左侧和右侧放置2列填充。
我的问题可能听起来像其他人，但是由于填充。如何正确布局这个布局？
Bootstrap有一个聪明的（但微妙的） 这就是为什么，如果你想在另一个 上面的代码本身没什么意义（您可以使用子行的标记你会得到相同的结果）。但是，当您想要抵消（或限制）布局的整个区域时，这很有用： = 行 > code> s / 保证金 s系统可以相互抵消，但可以为所有设备提供漂亮的填充 1
$ b 该系统基于一个简单的假设：
.col - * 是 .row s
的直接子代
.row 中放置 .row （您必须使用这个标记：
< div class =row >
< div class =col-12>
< div class =row>
< div class =col-md-4 offset-md-2>
网格可能
< / div>
< div class =col-md-4>
更多网格
< / div>
< / div>
< / div>
< / div>
< div class =col-md-8 offset-md-2 col-sm-10 offset-sm-1 col offset-0>
< div class =row>
< div class =col-md-6>网格< / div>
< div class =col-md-6>更多网格< / div>
< div class =col-md-6>网格< / div>
< div class =col-md-6>更多网格< / div>
< div class =col-md-6>网格< / div>
< div class =col-md-6>更多网格< / div>
< div class =col-md-6>网格< / div>
< div class =col-md-6>更多网格< / div>
< div class =col-md-6>网格< / div>
< div class =col-md-6>更多网格< / div>
< / div>
< / div>
< / div>
请参阅这个小提琴作为一个实例。
1 要摆脱Bootstrap的排水沟（在v4中），需要在 .row 上应用 no-gutters / code>。
I'm trying to create a full width page using Bootstrap. I have a setup similar to this:
<body>
<div class="container-fluid">
<div class="row">
The first row goes here
</div>
<div class="row">
The second row goes here
</div>
<div class="row">
The third row goes here
</div>
</div>
</body>
If I wanted to create a row inside a row, how would I do that? This is what I am trying to achieve:
<body>
<div class="container-fluid">
<div class="row">
<div class="row text-center">
<h1>Some title</h1>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-4">
Grid perhaps
</div>
<div class="col-md-4">
More grid
</div>
<div class="col-md-2"></div>
</div>
</div>
</div>
</body>
So basically I want to put the title on one row and some grids on another row. The tricky part here is, I want to place some columns that are 4 columns wide in the middle, and then have "2 columns padding" on the left and right.
My question may sound like others, but is unique because of the padding. How do I make this layout properly?
Bootstrap has a smart (but delicate) paddings/margins system that cancel each other out but provide good looking paddings on all devices 1.
This system is based on a simple assumption:
.col-*are immediate children of.rows
That's why, if you want to place a .row inside another .row (to further divide one of your cols), you'd have to use this markup:
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-md-4 offset-md-2">
Grid perhaps
</div>
<div class="col-md-4">
More grid
</div>
</div>
</div>
</div>
The above doesn't make much sense by itself (you could just use the markup of the child row and you'd get the same result). But it's useful when you want to offset (or limit) an entire area of a layout, like this:
<div class="row">
<div class="col-md-8 offset-md-2 col-sm-10 offset-sm-1 col offset-0">
<div class="row">
<div class="col-md-6">Grid</div>
<div class="col-md-6">More grid</div>
<div class="col-md-6">Grid</div>
<div class="col-md-6">More grid</div>
<div class="col-md-6">Grid</div>
<div class="col-md-6">More grid</div>
<div class="col-md-6">Grid</div>
<div class="col-md-6">More grid</div>
<div class="col-md-6">Grid</div>
<div class="col-md-6">More grid</div>
</div>
</div>
</div>
See this fiddle for a live example.
1 To get rid of Bootstrap's gutters (in v4), one would need to apply no-gutters class on .row.
这篇关于使用Bootstrap 4行内的多行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
