Bootstrap drei Spalten Positionierung

Question

Ich habe versucht, drei gleiche Spalten genau in der Mitte einer Reihe mit gleicher Polsterung auf beiden Seiten, in einem Behälter-Flüssigkeit auszurichten. Ich kann sie nicht in der Mitte der Seite positionieren. Ich habe versucht, die Breite auf den Container einzustellen, in dem sich diese drei Spalten befinden. aber das Layout bleibt auf der einen Seite und wird nie in der Mitte ausgerichtet.

<div class="container"> 
    <div class="row yellow"> 
     <div class="col-lg-12 "> 
     <div class="col-lg-3 col-sm-6 col-xs-6 col-xxs-12 green text-center"> 
      test 
     </div> 
     <div class="col-lg-3 col-sm-6 col-xs-6 col-xxs-12 green text-center"> 
      test 
     </div> 
     <div class="col-lg-3 col-sm-6 col-xs-6 col-xxs-12 green text-center"> 
      test 
     </div> 

     </div> 
    </div> 
    </div> 

Beigefügt ist der Ausgang, den ich recieving bin: output

Wie hier gezeigt, das Layout nach rechts ausgerichtet ist, ich es perfekt Zentrum mit gleich Polsterung zwischen diesen Spalten ausrichten möchten.

Es wäre gut zu wissen, wie das erreicht werden kann, ich habe versucht, dieses für eine Weile zu erledigen. Ihre Vorschläge werden definitiv dazu beitragen, dieses Problem zu lösen.

Vielen Dank im Voraus

Answer 1

Ihr Problem ist, dass Ihr Layout Summieren ist nicht auf 12 Spalten ..

col-lg-3 + col-lg-3 + col-lg-3 sind 9 Spalten summieren und in Haaren aus dem Sumpf Raster-System, das Sie 12 Spalten pro Zeile.

auch gibt es keine col-xxs-** Klasse. (lg = groß; md = mittel; sm = klein; xs = extra klein)

diese shoud den Trick:

<div class="container"> 
    <div class="row yellow"> 
    <div class="col-lg-12 "> 
     <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 green text-center"> 
     test 
     </div> 
     <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 green text-center"> 
     test 
     </div> 
     <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 green text-center"> 
     test 
     </div> 
    </div> 
    </div> 
</div> 

einen Blick auf Bootrstaps Docs Nehmen Sie mehr über das zu erfahren, Grid-System: http://getbootstrap.com/css/#grid

Answer 2

Wie @Sadi sagt, das Layout von 12 cols gemacht wird, so shoold Sie Ihre Spalten von col-lg-3 col-lg-4 ändern. Außerdem sollten Sie Ihre grün auf den inneren Behälter gelten, sonst haben Sie keine padding:

<div class="container"> 
<div class="row yellow"> 
    <div class="col-lg-4 col-sm-6 col-xs-6 col-xxs-12 text-center"> 
     <div class="green"> 
     test 
     </div> 
    </div> 
    <div class="col-lg-4 col-sm-6 col-xs-6 col-xxs-12 text-center"> 
     <div class="green"> 
     test 
     </div> 
    </div> 
    <div class="col-lg-4 col-sm-6 col-xs-6 col-xxs-12 text-center"> 
     <div class="green"> 
     test 
     </div> 
    </div> 
</div> 

Codepen: https://codepen.io/giannidk/pen/ZymdOy