CSS Bootstrap 3 - 2 列嵌套行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19319957/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 - 2 column nested rows
提问by user933791
I'm trying to achieve the following in Bootstrap 3 using as little of my own markup and CSS as possible. Ideally I'd like to achieve this using pure Bootstrap Markup without resorting to hacks. I've looked at the documentation but can't see a standardized way....
我正在尝试使用尽可能少的我自己的标记和 CSS 在 Bootstrap 3 中实现以下目标。理想情况下，我想使用纯 Bootstrap 标记来实现这一点，而无需求助于黑客。我看过文档，但看不到标准化的方式....
As you can see below, I'm trying to get two rows with a gap in the center.
正如你在下面看到的，我试图让两行中间有一个间隙。
My Markup as follows
我的标记如下
<section class="row">
<article class="col-sm-12 col-md-6">
<!--ROW LEFT-->
<div class="row">
<div class="col-sm-4">col</div>
<div class="col-sm-4">col</div>
<div class="col-sm-4">col</div>
</div>
</article>
<article class="col-sm-12 col-md-6">
<!--ROW RIGHT-->
<div class="row">
<div class="col-sm-4">col</div>
<div class="col-sm-4">col</div>
<div class="col-sm-4">col</div>
</div>
</article>
</section>
The only similar example Bootstrap has in the Docs is below, but you don't get a gap in the center.
Bootstrap 在文档中的唯一类似示例如下，但中间没有间隙。
BOOTSTRAPS MARKUP
自举标记
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-6">
content
</div>
<div class="col-sm-6">
content
</div>
</div>
</div>
</div>
回答by John Reid
To expand on Skelly's answer, you can use Bootstrap's column offset classes to create gaps between columns:
要扩展 Skelly 的答案，您可以使用 Bootstrap 的列偏移类来创建列之间的间隙：
<div class="container"><section class="row">
<article class="col-sm-12 col-md-5">
<!--ROW LEFT-->
<div class="row" style="background-color:blue;">
<div class="col-sm-4" style="background-color:orange;">col</div>
<div class="col-sm-4" style="background-color:silver;">col</div>
<div class="col-sm-4" style="background-color:orange;">col</div>
</div>
</article>
<article class="col-sm-12 col-md-5 col-md-offset-2">
<!--ROW RIGHT-->
<div class="row" style="background-color:blue;">
<div class="col-sm-4" style="background-color:silver;">col</div>
<div class="col-sm-4" style="background-color:orange;">col</div>
<div class="col-sm-4" style="background-color:silver;">col</div>
</div>
</article>
</section></div>
This prevents having to add extra styles but does create a larger gap as you're using two virtual columns to create the space.
这可以防止必须添加额外的样式，但会在您使用两个虚拟列来创建空间时创建更大的间隙。
If you don't mind the extra space on the right, you could make the offset 1 instead.
如果您不介意右侧的额外空间，您可以将偏移量设为 1。
回答by Zim
How big do you want the gap?
你想要多大的差距？
Using BS cols you could do something like this..
使用 BS cols 你可以做这样的事情..
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-5">
content
</div>
<div class="col-sm-1"></div> <div class="col-sm-1"></div>
<div class="col-sm-5">
content
</div>
</div>
</div>
</div>
Demo: http://bootply.com/87117
回答by Bass Jobsen
(or) try to construct with padding:
（或）尝试用填充构造：
<section class="row" style="background-color:red;">
<article class="col-sm-12 col-md-6" style="padding-right:30px;">
<!--ROW LEFT-->
<div class="row" style="background-color:blue;">
<div class="col-sm-4" style="background-color:orange;">col</div>
<div class="col-sm-4" style="background-color:silver;">col</div>
<div class="col-sm-4" style="background-color:orange;">col</div>
</div>
</article>
<article class="col-sm-12 col-md-6" style="padding-left:30px;">
<!--ROW RIGHT-->
<div class="row" style="background-color:blue;">
<div class="col-sm-4" style="background-color:silver;">col</div>
<div class="col-sm-4" style="background-color:orange;">col</div>
<div class="col-sm-4" style="background-color:silver;">col</div>
</div>
</article>
</section>
Your gap in red, see: http://bootply.com/87152
你的红色差距，见：http: //bootply.com/87152
