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