帶有2個子列的Bootstrap col-md-3在

Question

我試圖找出如何使用bootstrap執行搜索以下網格。

我有4個「col-md-3」div，但在最後一個「col-md-3」div下，我想在它下面有2個cols，每個佔用'col-md-3「寬度的一半

我想這兩個最後的山坳下堆疊在一起。

我可以用一個五點關口寬度像什麼位置>>https://stackoverflow.com/a/22799354/8011344但在最後關口div的內容只是需要一個小的寬度像12.5％

任何想法

A picture of what Im trying to do

https://i.stack.imgur.com/gv3a7.png

Answer 1

首先添加四個col-sm-3並在最後關口添加行有兩個關口與col-xs-6其中有50％的價值

[class*='col-']{ 
 
    background:#f0f0f0; 
 
    margin-bottom:5px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="row"> 
 
    <div class="col-xs-3">col-xs-3</div> 
 
    <div class="col-xs-3">col-xs-3</div> 
 
    <div class="col-xs-3">col-xs-3</div> 
 
    <div class="col-xs-3"> 
 
    <div class="row"> 
 
     <div class="col-xs-6">col-xs-6</div> 
 
     <div class="col-xs-6">col-xs-6</div> 
 
    </div> 
 
    </div> 
 
</div>