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

有了這個代碼，你可以用4列喜歡的圖片，例如 創建2行：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> 

編輯 - 2017年7月4日

隨着Boostrap 4和彈性盒的東西改爲：

<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