我正在尝试使用 Bootstrap 创建一个全宽页面.我有一个类似的设置:
<div class="container-fluid"><div class="row">第一行在这里<div class="row">第二行在这里
<div class="row">第三行在这里
如果我想在一行中创建一行，我该怎么做?这就是我想要实现的目标:
<div class="container-fluid"><div class="row"><div class="row text-center"><h1>一些标题</h1><div class="row"><div class="col-md-2"></div><div class="col-md-4">格子也许
<div class="col-md-4">更多格
<div class="col-md-2"></div>
所以基本上我想把标题放在一行，把一些网格放在另一行.这里的棘手部分是，我想在中间放置一些 4 列宽的列，然后在左右两侧各放置2 列填充".
我的问题可能听起来像其他人，但由于填充，我的问题是独一无二的.如何正确制作此布局?
Bootstrap 有一个智能(但精致)的排水沟系统，提供自然"(margins + paddings) 适用于所有设备上的内容1.
这个系统基于两个简单的假设:
.rows 2这就是为什么，如果您想将 .row 放在另一个 .row 中(以进一步划分您的一个列)，您必须使用此标记:
<div class="col-12"><div class="row"><div class="col-md-4 offset-md-2">格子也许<div class="col-md-4">更多格
上述内容本身并没有多大意义(您可以只使用子行的标记，您会得到相同的结果).但是当您想要偏移(或限制)布局的整个区域时，它很有用，如下所示:
<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>请参阅这个小提琴以获取现场示例.
<小时>1 要摆脱 Bootstrap 的装订线(在 v4 中)，需要在 上应用 .no-gutters 类.行
2 这是一个一般原则"，而不是严格规则".允许(甚至推荐)其他元素作为 .row 的直接子元素(例如 列中断).在另一端，其他元素从 .rows(例如 .form-rows)扩展，从而继承了 gutter 系统并成为有效的列父项.
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) gutters system providing "natural" (margins + paddings) for content on all devices 1.
This system is based on two simple assumptions:
.rows 2That'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.
2 This is a "general principle", not a "strict rule". Other elements are allowed (and even recommended) as direct children of .rows (such as column breaks). At the other end, other elements extend from .rows (such as .form-rows), thus inheriting the gutters system and being valid column parents.
这篇关于Bootstrap 4 一行内的多行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
