centro bootstrap 3 col-MD-3 div

Question

ho un wrapper in questo modo: <div class="community-images"></div>

e all'interno di questo involucro Ho 3 Col-MD-3 div:

<div class="col-md-3"></div> 
<div class="col-md-3"></div> 
<div class="col-md-3"></div> 

quello che sto cercando fare è centrare questi 3 div all'interno del wrapper, come potrei realizzare questo?

Ecco il CSS:

.community-images { 
    padding: 40px 0px 40px 0px; 
} 

.col-md-3 { 
    border: 1px solid #ccc; 
    padding: 10px; 
    margin: 10px; 
    min-height: 300px; 
    box-shadow: 10px 10px 5px #888888; 
} 

Answer 1

Aggiornamento: Si tratta di un'ottima soluzione per il layout normale, non a Twitter Bootstrap in quanto interrompe il comportamento Bootstrap. Controlla la risposta di Jeben per un layout migliore.

Una soluzione di browser moderna e adatta al tuo problema. Tecnologia Flexbox con contenuti giustificati.

@media (min-width:992px) { 
    .community-images { 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-pack: center; 
    -webkit-justify-content: center; 
    -ms-flex-pack: center; 
    justify-content: center; 
    } 
} 

Bootply

Answer 2

ci sono classi col-md-offset. Sfortunatamente avete bisogno di col-md-offset-1-e-half-class per avere 12 colonne in somma.

Sto parlando di 1,5 + 3 + 3 + 3 + 1.5 = 12

Così si può scrivere la propria classe per compensare il col. Smth come questo.

@media (min-width: 992px) { 
    .col-md-offset-1-and-half { 
     margin-left: 12.499999995%; // col-md-offset-1 has 8.33333333 
     // so you multiply 8.33333333 * 1.5 = 12.499999995% 
    } 
} 

<div class="col-md-3 col-md-offset-1-and-half"></div> 
<div class="col-md-3"></div> 
<div class="col-md-3"></div> 

Answer 3

centraggio elementi galleggianti (peraltro responsive) come colonne bootstrap richiede un certo lavoro con i margini, come yuyokk suggerito.

Oppure si può unfloat gli elementi e utilizzare inline-block:

.community-images { 
    text-align: center; 
} 

.col-md-3 { 
    float: none; 
    display: inline-block; 
    text-align: left; //reset the text alignement to left 
} 

funziona ovunque, compreso IE8.

Answer 4

per chiunque utilizzi Bootstrap 4, è stato aggiunto questa funzionalità: http://v4-alpha.getbootstrap.com/layout/grid/#variable-width-content

<div class="container"> 
    <div class="row justify-content-md-center"> 
    <div class="col col-lg-2"> 
     1 of 3 
    </div> 
    <div class="col-12 col-md-auto"> 
     Variable width content 
    </div> 
    <div class="col col-lg-2"> 
     3 of 3 
    </div> 
    </div> 
    <div class="row"> 
    <div class="col"> 
     1 of 3 
    </div> 
    <div class="col-12 col-md-auto"> 
     Variable width content 
    </div> 
    <div class="col col-lg-2"> 
     3 of 3 
    </div> 
    </div> 
</div> 

Answer 5

Codice:

<div class="community-images"> 
<div class="col-md-3 community-margin"></div> 
<div class="col-md-3"></div> 
<div class="col-md-3"></div> 
</div> 

css:

@media (min-width: 768px) { 
.community-margin{ 
    margin-left: 12.5%; 
} 
} 

.community-images { 
    padding: 40px 0px 40px 0px; 
} 

.col-md-3 { 
    border: 1px solid #ccc; 
    padding: 10px; 
    margin: 10px; 
    min-height: 300px; 
    box-shadow: 10px 10px 5px #888888; 
} 

Prova sopra il codice. Hai sicuramente una soluzione. È possibile fare riferimento anche al seguente link: https://wordpress.com/post/wpkuldip.wordpress.com/61