Wie in Bootstrap 1/5 Column Grid auf 3

Question

Ich habe ein Layout, das ich neben jeder drei Div setzen müssen andere als:

<div class="row"> 
    <div class="col-md-1.5" id="legend"></div> 
    <div class="col-md-0.5" id="icon"></div> 
    <div class="col-md-10" id="map"></div> 
</div> 

Ich weiß es möglich, die Legende und Ikone div innerhalb eins zu bekommen row aber ich muss sie getrennt halten, während die legend wird verschiebbar sein und in diesem Fall muss ich die col-md-10 von map durch col-md-11.5 ersetzen.

Können Sie leasen lassen Sie mich wissen, wie ich das tun kann?

Answer 1

Bootstrap 3

Verwenden wie diese Verschachtelung ..

<div class="row"> 
    <div class="col-md-2"> 
     <div class="col-md-9" id="legend"></div> 
     <div class="col-md-3" id="icon"></div> 
    </div> 
    <div class="col-md-10" id="map"></div> 
</div> 

http://www.bootply.com/125259

Update für Bootstrap 4

Hier ist eine 1/5 Säule in Bootstrap 4 (kein extra CSS oder SASS) mit dem auto-layout grid ..

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-2">2</div> 
     <div class="col-2">2</div> 
     <div class="col-2">2</div> 
     <div class="col-2">2</div> 
     <div class="col">1/5</div> 
    </div> 
</div> 

http://www.codeply.com/go/gjmzB4MTMe

Diese Lösung funktioniert, weil Bootstrap 4 jetzt Flexbox ist. Sie können die 5 Spalten erhalten, um witein .row mit einer Clearfix-Unterbrechung wie sehr 5 Spalten zu wickeln.