ブートストラップcol-md-3の下に2つのサブコールがある

Question

私は検索のためにブートストラップで次のグリッドを行う方法を理解しようとしています。

私は4つの "col-md-3" divを持っていますが、最後の "col-md-3" divの下に、col-md-3幅の半分を占める2つのcolを付けたいと考えています。

私は最後のCOLの下に2つを一緒に積み重ねることにしたい。

私はここでいただきました！のような5 COL幅を使用している可能性が

>>https://stackoverflow.com/a/22799354/8011344が、最後のCOLのdivの下の内容だけで12.5％のような小さな幅を必要とします

任意のアイデア

A picture of what Im trying to do

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

Answer 1

まず、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>