Bootstrap 3 - wie man Offsets verwendet, um gleiche Abstände zwischen `.col-md-3` zu erhalten

Question

Ich benutze Bootstrap 3.3.7. Fiddle hier: https://jsfiddle.net/eLaj3ksb/

Ausgabe sieht wie folgt aus:

Was ich versuche zu tun bekommen „Spalte C“, um mit der rechten Seite der roten Spalte ausgerichtet werden, sondern auch halten „Spalte A“ wo es ist, und haben den gleichen Abstand zwischen "Spalte B".

Also im Wesentlichen ich will, dass es so erscheint, wie es ist, mit "Spalte C" auf der rechten und "Spalte B" in der Mitte. Gleiche Abstände zwischen den Spalten A-B und B-C.

Ich kann nicht herausfinden, welche offset Klassen verwendet werden müssen. Ich möchte Spalte A/B/C gleich breit sein, also col-md-3 verwendet haben. Also, das addiert sich zu 9. Aber welche offset Nummern verwende ich, um diese Arbeit zu machen?

Wenn ich .col-md-offset-1 auf "Spalte A", "Spalte C" endet, wo ich will, aber es schiebt "Spalte A" von der linken Seite der roten Spalte!

Ich bekomme das Ding davon muss bis zu 12 hinzufügen ... aber wie ist das in dieser Situation möglich?

Sind die 5px grauen Ränder an meinen Spalten (A/B/C) ein Problem? Wenn ja, wie kann ich solche Grenzen haben und den Abstand beibehalten?

Answer 1

Dies ist (soweit mir bekannt ist) mit Standard Bootstrap3 Klassen/Offsets nicht möglich.

Flexbox kann dies tun, aber es bedeutet, einige der Standard Bootstrap 3 Eigenschaften zu überschreiben.

.flex { 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 

 
.row.flex:before, 
 
.row.flex:after { 
 
    display: none; 
 
}

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

 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-12" style="border:1px solid red;"> 
 
      <div class="row flex"> 
 
       <div class="col-md-3" style="border:5px solid #ccc; padding: 20px; min-height: 150px;"> 
 
        <p>Column A</p> 
 
       </div>  
 
       <div class="col-md-3" style="border:5px solid #ccc; padding: 20px; min-height: 150px;"> 
 
        <p>Column B</p> 
 
       </div>  
 
       <div class="col-md-3" style="border:5px solid #ccc; padding: 20px; min-height: 150px;"> 
 
        <p>Column C</p> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>