Come dividere la riga di bootstrap in 5 parti uguali?

Question

Voglio dividere la riga bootstrap in 5 parti uguali. Include 12-col-md, quindi come posso dividerlo in 5 parti uguali?

Qualcuno può aiutarmi a risolvere questo problema?

Answer 1

È possibile utilizzare span2 per utilizzare la quantità massima di spazio. Si prega di trovare il codice:

<div class="row-fluid"> 
    <div class="span2">1</div> 
    <div class="span2">2</div> 
    <div class="span2">3</div> 
    <div class="span2">4</div> 
    <div class="span2">5</div> 
</div> 

Answer 2

È possibile usare qualcosa come

<div class="container"> 
    <div class="col-sm-2 col-sm-offset-1"></div> 
    <div class="col-sm-2"></div> 
    <div class="col-sm-2"></div> 
    <div class="col-sm-2"></div> 
    <div class="col-sm-2"></div> 
</div> 

il primo contenitore sarà compensato in modo da avere lo stesso margine (Col-sm-1) a sinistra ea destra lato con 5 contenitori uguali all'interno.

Answer 3

Vecchio bootstrap Versione

utilizzare cinque div con una classe di span2 e dare il primo di una classe di offset1.

<div class="row-fluid"> 
    <div class="span2 offset1"></div> 
    <div class="span2"></div> 
    <div class="span2"></div> 
    <div class="span2"></div> 
    <div class="span2"></div> 
</div> 

Cinque colonne equidistanti e centrate.

---

In bootstrap 3.0 e 4 alfa.

<div class="row"> 
    <div class="col-md-2 col-md-offset-1"></div> 
    <div class="col-md-2"></div> 
    <div class="col-md-2"></div> 
    <div class="col-md-2"></div> 
    <div class="col-md-2"></div> 
</div> 

---

CUSTOM

stili personalizzati

.container {width:100%; float:left;} 
.col1{ width:20%; float:left} 

ultimo stile Tavolo

.container {width:100%;display:table;} 
.col1{ width:20%; display:table-cell;} 

Answer 4

Un ottimo modo per risolvere questo è here!

Per impostazione predefinita Bootstrap non fornisce un sistema di griglia che ci consente di creare un layout a cinque colonne, ma come potete vedere è piuttosto semplice. All'inizio è necessario creare una definizione di colonna predefinita nel modo in cui Bootstrap lo fa. Ho chiamato le mie lezioni col -..- 15.

.col-xs-15, 
.col-sm-15, 
.col-md-15, 
.col-lg-15 { 
    position: relative; 
    min-height: 1px; 
    padding-right: 10px; 
    padding-left: 10px; 
} 

Successivamente è necessario definire la larghezza di nuove classi in caso di diverse media query.

.col-xs-15 { 
    width: 20%; 
    float: left; 
} 
@media (min-width: 768px) { 
.col-sm-15 { 
     width: 20%; 
     float: left; 
    } 
} 
@media (min-width: 992px) { 
    .col-md-15 { 
     width: 20%; 
     float: left; 
    } 
} 
@media (min-width: 1200px) { 
    .col-lg-15 { 
     width: 20%; 
     float: left; 
    } 
} 

Ora siete pronti per combinare le vostre classi con le classi Bootstrap originali. Ad esempio, se si desidera creare div elemento che si comportano come cinque colonne layout su schermi di media e come quattro colonne su quelli più piccoli, non vi resta che usare qualcosa di simile:

<div class="row"> 
    <div class="col-md-15 col-sm-3"> 
    ... 
    </div> 
</div>