Bootstrap Col-md-3 mit 2 Sub-Spalten unter

Question

Ich versuche herauszufinden, wie das folgende Raster mit Bootstrap für eine Suche zu tun.

Ich habe 4 "col-md-3" divs, aber unter dem letzten "col-md-3" div möchte ich 2 cols darunter mit jeder Besetzung der Hälfte von 'col-md-3 "Breiten.

ich mag, dass die beide unter der letzten Spalte übereinander gestapelt werden.

ich mag was hier >>https://stackoverflow.com/a/22799354/8011344 eine fünf col Breite verwendet haben könnte, aber der Inhalt unter dem letzten col divs erfordert nur eine geringe Breite wie 12,5%

Irgendwelche Ideen

A picture of what Im trying to do

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

Answer 1

Die ersten vier col-sm-3 und in letzten Spalte add Reihe mit zwei col mit col-xs-6, die 50% -Wert haben

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