Wie div-Spalten im Bootstrap zu zentrieren

Question

Ich habe ein Bootstrap div, das 3 Spalten oder 2 Spalten oder 1 Spalte basierend auf einer Bedingung haben kann. Da die Anzahl der Spalten geringer ist, muss ich sie im äußeren Teil zentrieren. Wie kann ich es erreichen?

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

 
    <div class="col-lg-12"> 
 
    <div class="col-lg-4">1</div> 
 
    <div class="col-lg-4">2</div> 
 
    <div class="col-lg-4">3</div> 
 
    
 
    </div>

unter der Bedingung Basierend, könnte ich nur div 1 und 2 oder nur 1 oder alle 1,2,3 haben. Gibt es eine Möglichkeit, dass ich die Position des Div immer unabhängig von den Spalten in der Mitte machen kann? und schweben sie nicht nach links

Answer 1

Verwenden Bootstrap der text-center Klasse auf der äußeren div:

<div class="col-lg-12 text-center"> 

Answer 2

Dies wird einfacher Weg sein. Dies wird überall funktionieren.

CSS:

.col-lg-4 { 
    margin: 0 auto; 
} 

Oder Sie können Flexbox verwenden (aber ich sehe keinen Grund, es hier zu verwenden).

.col-lg-12 { 
    display: flex; 
    justify-content: center; 
} 

Answer 3

hinzufügen Sonderklasse auf die Zeilen, die Sie zentriert werden soll ..

.row.col-centered > [class*='col-'] { 
    display: inline-block; 
    float: none; 
} 

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