twitter-bootstrap Bootstrap - 4 列网格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21351943/
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 - 4 column grid
提问by Smack
I can not get thet rows on the page. I'm always page halved into two horizontal section and I want four vertical sections.
我无法在页面上获取这些行。我总是把页面分成两个水平部分，我想要四个垂直部分。
Here is PICTURE:
:
这是图片
：：
Here is fiddle of my code that you can easy know that what I want FIDDLE.
这是我的代码的小提琴，你可以很容易地知道我想要什么FIDDLE。
I only need that middle content to be like on picture.. 4 vertical columns and in that columns that i have 2 blocks.
我只需要中间的内容就像图片一样...... 4 个垂直列，在我有 2 个块的那些列中。
Here is my try :
这是我的尝试：
<div class="col-md-12">
<div class="pane border-right">
<div>
<div style="float: left;">
</div>
</div>
<div class="col-md-6 specifica ">
<div class="col-sm-3 border-right-dotted">
a
</div>
<div class="col-sm-3 border-right-dotted">
b
</div>
</div>
<div class="col-md-3 specifica ">
<div class="col-sm-3 border-right-dotted">
c
</div>
<div class="col-sm-3 ">
d
</div>
</div>
回答by Ignacio Correia
With this code you can create 2 rows with 4 columns like the picture, example: http://jsfiddle.net/ignaciocorreia/rc2E7/1/
使用此代码，您可以像图片一样创建 2 行 4 列，例如：http: //jsfiddle.net/ignaciocorreia/rc2E7/1/
<div class="row">
<div class="col-sm-3 col-md-3">a</div>
<div class="col-sm-3 col-md-3">b</div>
<div class="col-sm-3 col-md-3">c</div>
<div class="col-sm-3 col-md-3">d</div>
</div>
----
<div class="row">
<div class="col-sm-3 col-md-3">a</div>
<div class="col-sm-3 col-md-3">b</div>
<div class="col-sm-3 col-md-3">c</div>
<div class="col-sm-3 col-md-3">d</div>
</div>
EDIT - 07-04-2017
编辑 - 07-04-2017
With Boostrap 4 and flex box things change to:
使用 Boostrap 4 和 flex box，事情变成了：
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
</div>
Working example: https://codepen.io/igcorreia/pen/jBjbQP
