Bootstrap - 4列网格

Question

我无法在页面上获取这些行。我总是将页面减半分成两个水平部分，我想要四个垂直部分。

这是图片： ：

以下是我的代码的小提示，您可以轻松地知道我想要的内容FIDDLE。

我只需要中间内容就像在图片上一样.. 4个垂直列，在那个列中我有2个块。

这是我的尝试：

<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>

Answer 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>

编辑 - 07-04-2017

使用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>

工作示例：https://codepen.io/igcorreia/pen/jBjbQP