2015-08-11 12 views
20

Sto cercando di ottenere 5 colonna di layout a larghezza piena, ma non riesco a trovare la soluzione che si adatta alle mie esigenzebootstrap 5 colonna di layout

Ecco il codice che uso

<!-- Content Section --> 
    <div class="container"> 
     <div class="row"> 
     <div class="col-lg-12" style="border: 1px solid red"> 
      <div class="row"> 
      <div class="col-xs-12"> 
       <div class="col-xs-2 col-xs-offset-1" id="p1">One</div> 
       <div class="col-xs-2" id="p2">Two</div> 
       <div class="col-xs-2" id="p3">Three</div> 
       <div class="col-xs-2" id="p4">Four</div> 
       <div class="col-xs-2" id="p5">Five</div> 
      </div> 
      <!-- //col-lg-12 --> 
      </div> 
      <!-- //row --> 
      lorem 
     </div> 
     </div> 
     <!-- //col-lg-12 --> 
    </div> 
    <!-- //row --> 
    </div> 
    <!-- //container --> 

Come risultato Ottengo enter image description here

Ed ecco cosa sto cercando di ottenere. Larghezza 5 layout di colonna con uno spazio tra ogni colonna enter image description here

+0

Possibile duplicato [cinque colonne uguali a Twitter bootstrap] (http://stackoverflow.com/questions/10387740/ five-equal-columns-in-twitter-bootstrap) – webeno

risposta

30

.col-xs-2{ 
 
    background:#00f; 
 
    color:#FFF; 
 
} 
 
.col-half-offset{ 
 
    margin-left:4.166666667% 
 
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row" style="border: 1px solid red"> 
 
     <div class="col-xs-2" id="p1">One</div> 
 
     <div class="col-xs-2 col-half-offset" id="p2">Two</div> 
 
     <div class="col-xs-2 col-half-offset" id="p3">Three</div> 
 
     <div class="col-xs-2 col-half-offset" id="p4">Four</div> 
 
     <div class="col-xs-2 col-half-offset" id="p5">Five</div> 
 
     <div>lorem</div> 
 
    </div> 
 
</div>

Questo dovrebbe essere ok.

+1

Funziona, buona idea! L'importante è usare il giusto valore% per gli spazi vuoti a seconda del numero di colonne. –

4

5 Colonne con Bootstrap 4

Ecco 5 pari, le colonne a tutta larghezza (senza supplemento CSS o SASS) utilizzando il auto-layout grid ..

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

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

Questa soluzione funziona perché Bootstrap 4 è ora Flexbox. È possibile ottenere le 5 colonne per avvolgere lo stesso .row utilizzando un'interruzione di clearfix come <div class="col-12"></div> o <div class="w-100"></div> molto 5 colonne.

+0

Vero ma le colonne non sono uguali larghezza – GiorgosK

+0

Cosa intendi? Come sono non uguale larghezza? – ZimSystem

+0

Ho avuto un caso che non era uguale alla larghezza ... dipende dal contenuto no? scusa non riesco a ricordare il caso esatto ... – GiorgosK

1

Date un'occhiata a questa pagina per bootstarp generale informazioni sul layout http://getbootstrap.com/css/#grid-offsetting

Prova questo:

<div class="col-xs-2" id="p1">One</div> 
<div class="col-xs-3"> 
    <div class="col-xs-8 col-xs-offset-2" id="p2">Two</div> 
</div> 
<div class="col-xs-2" id="p3">Three</div> 
<div class="col-xs-3"> 
    <div class="col-xs-8 col-xs-offset-2" id="p4">Four</div> 
</div> 
<div class="col-xs-2" id="p5">Five</div> 

ho diviso la larghezza in 5 irregolare div con col-xs- 2,3,2,3,2 rispettivamente. I due div con col-xs-3 sono 1,5 volte la dimensione di col-xs-2 div, quindi la larghezza della colonna deve essere 2/3x (1.5 x 2/3 = 1) le larghezze col-xs-3 corrispondenti al resto.

5

Basta aggiungere questo alla tua CSS

/* 5 Columns */ 

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

.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; 
    } 
} 
+2

potrebbe essere moralmente corretto per cita la fonte, che è http://www.wearesicc.com/quick-tips-5-column-layout-with-twitter-bootstrap/, a quanto pare, a meno che tu non sia il proprietario di quel sito;) – webeno

0

Il modo migliore per farlo devo dire che questo è quello di cambiare il numero di colonne si dispone invece di cercare di bodge 5 in 12.

Il miglior numero che si probabilmente potrebbe usare è 20 come è divisble da 2, 4 & 5.

Quindi nel tuo variables.less look per: @grid-columns: 12 e cambiare questo 20.

poi cambiare tuo html per:

 <div class="row"> 
     <div class="col-xs-20"> 
      <div class="col-xs-4" id="p1">One</div> 
      <div class="col-xs-4" id="p2">Two</div> 
      <div class="col-xs-4" id="p3">Three</div> 
      <div class="col-xs-4" id="p4">Four</div> 
      <div class="col-xs-4" id="p5">Five</div> 
     </div> 
     <!-- //col-lg-20 --> 
     </div> 

io personalmente uso display: flex per questo come bootstrap non è progettato notevolmente per una frazione di 5 colonna.

0

versione Copypastable di wearesicc's 5 col solution con le variabili di bootstrap:

.col-xs-15, 
.col-sm-15, 
.col-md-15, 
.col-lg-15 { 
    position: relative; 
    min-height: 1px; 
    padding-right: ($gutter/2); 
    padding-left: ($gutter/2); 
} 

.col-xs-15 { 
    width: 20%; 
    float: left; 
} 
@media (min-width: $screen-sm) { 
    .col-sm-15 { 
     width: 20%; 
     float: left; 
    } 
} 
@media (min-width: $screen-md) { 
    .col-md-15 { 
     width: 20%; 
     float: left; 
    } 
} 
@media (min-width: $screen-lg) { 
    .col-lg-15 { 
     width: 20%; 
     float: left; 
    } 
} 
4

A volte mi viene chiesto di utilizzare alcuni layout di griglia piuttosto strano in siti web esistenti bootstrap (senza rovinare il codice corrente). Quello che ho fatto è creare un file CSS separato che posso semplicemente rilasciare nei progetti di bootstrap correnti e utilizzare gli stili di layout della griglia. Ecco cosa contiene il file bootstrap-5ths.css con un esempio di come appare per la versione di bootstrap 4.

Se si desidera utilizzare questo con bootstrap versione 3, è sufficiente rimuovere gli stili col-xl- * e modificare le larghezze min da 576px a 768px, da 768px a 992px e da 992px a 1200px.

.col-xs-5ths, .col-sm-5ths, .col-md-5ths, .col-lg-5ths, .col-xl-5ths, 
 
.col-xs-two5ths, .col-sm-two5ths, .col-md-two5ths, .col-lg-two5ths, .col-xl-two5ths, 
 
.col-xs-three5ths, .col-sm-three5ths, .col-md-three5ths, .col-lg-three5ths, .col-xl-three5ths, 
 
.col-xs-four5ths, .col-sm-four5ths, .col-md-four5ths, .col-lg-four5ths, .col-xl-four5ths, 
 
.col-xs-five5ths, .col-sm-five5ths, .col-md-five5ths, .col-lg-five5ths, .col-xl-five5ths, 
 
{ 
 
    position: relative; 
 
    min-height: 1px; 
 
    padding-right: 15px; 
 
    padding-left: 15px; 
 
} 
 

 
@media (min-width: 576px) { 
 
    .col-sm-5ths {width: 20%;float: left;} 
 
    .col-sm-two5ths {width: 40%;float: left;} 
 
    .col-sm-three5ths {width: 60%;float: left;} 
 
    .col-sm-four5ths {width: 80%;float: left;} 
 
} 
 

 
@media (min-width: 768px) { 
 
    .col-md-5ths {width: 20%;float: left;} 
 
    .col-md-two5ths {width: 40%;float: left;} 
 
    .col-md-three5ths {width: 60%;float: left;} 
 
    .col-md-four5ths {width: 80%;float: left;} 
 
} 
 

 
@media (min-width: 992px) { 
 
    .col-lg-5ths {width: 20%;float: left;} 
 
    .col-lg-two5ths {width: 40%;float: left;} 
 
    .col-lg-three5ths {width: 60%;float: left;} 
 
    .col-lg-four5ths {width: 80%;float: left;} 
 
} 
 

 
@media (min-width: 1200px) { 
 
    .col-xl-5ths {width: 20%;float: left;} 
 
    .col-xl-two5ths {width: 40%;float: left;} 
 
    .col-xl-three5ths {width: 60%;float: left;} 
 
    .col-xl-four5ths {width: 80%;float: left;} 
 
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
<div class="row"> 
 
    <div class="col-md-5ths">1</div> 
 
    <div class="col-md-5ths">1</div> 
 
    <div class="col-md-5ths">1</div> 
 
    <div class="col-md-5ths">1</div> 
 
    <div class="col-md-5ths">1</div> 
 
</div> 
 
<div class="row"> 
 
    <div class="col-md-5ths">1</div> 
 
    <div class="col-md-two5ths">2</div> 
 
    <div class="col-md-two5ths">2</div> 
 
</div> 
 
<div class="row"> 
 
    <div class="col-md-three5ths">3</div> 
 
    <div class="col-md-two5ths">2</div> 
 
</div> 
 
<div class="row"> 
 
    <div class="col-md-four5ths">4</div> 
 
    <div class="col-md-5ths">1</div> 
 
</div> 
 
<div class="row"> 
 
    <div class="col-md-five5ths">5</div> 
 
</div> 
 
</div>

1

può usare come sotto in bootstrap3:

<div class="row"> 

    <div class="col-md-2 col-md-offset-1">One</div> 
    <div class="col-md-2">Two</div> 
    <div class="col-md-2">Three</div> 
    <div class="col-md-2">Four</div> 
    <div class="col-md-2">Five</div> 

</div> 
Problemi correlati