Bootstrap 3 Gutter Size

Ho appena iniziato a lavorare con bootstrap e non sono sicuro di come raggiungere il mio objective.

Vorrei che le grondaie fossero tutte uguali, come in questa immagine:

inserisci la descrizione dell'immagine qui

per impostazione predefinita, assomigliano a questo, le grondaie verticali tra le colonne (contrassegnate con il blu) sono il doppio delle grondaie orizzontali e esterne:

inserisci la descrizione dell'immagine qui

Qualsiasi aiuto sul modo migliore per risolvere questo probabilmente sarebbe apprezzato.

provare:

.row { margin-left: 0; margin-right: 0; } 

Ogni colonna ha un’imbottitura di 15 px su entrambi i lati. Che crea una grondaia di 30 px. Nel caso della griglia sm, la class del container sarà 970px (((940px + @ grid-gutter-width))). Ogni colonna ha una larghezza di 940/12. La risultante @ griglia-larghezza-larghezza / 2 su entrambi i lati della griglia sarà nascosta con un margine negativo di – 15px ;. Annullando questo margine sinistro negativo si imposta una grondaia di 30 px su entrambi i lati della griglia. Questa grondaia è costruita con imbottitura 15px della colonna + spazio di rest della griglia di 15 px.

aggiornare

In risposta alla risposta di @ElwoodP, considera il seguente codice:

 
div 1: .col-md-9
div 2: .col-md-6
div 2: .col-md-6
div 1: .col-md-3

Nel caso della nidificazione, la manipolazione della class .row influenza in effetti la sottorubria. Il bene o l’errore dipendono dalle vostre aspettative / requisiti per la subgrid. Cambiando il margine del .row non si .row la .row .

predefinito:

inserisci la descrizione dell'immagine qui

margine della class .row

con:

 .row { margin-left: 0; margin-right: 0; } 

inserisci la descrizione dell'immagine qui

imbottitura della class .container

con:

 .container { padding-left:30px; padding-right:30px; } 

inserisci la descrizione dell'immagine qui

Notare che le griglie secondarie non dovrebbero essere racchiuse all’interno di una class .container .

Non credo che la risposta di Bass sia corretta. Perché toccare i margini delle righe? Hanno un margine negativo per compensare il riempimento della colonna per le colonne sul bordo della riga. Incastrando con questo si romperà qualsiasi riga annidata.

La risposta è semplice, basta rendere il riempimento del contenitore uguale alla dimensione della grondaia:

ad es. per il bootstrap predefinito:

 .container { padding-left:30px; padding-right:30px; } 

http://jsfiddle.net/3wBE3/61/

Puoi mantenere il comportamento predefinito (con gutter) e aggiungere una class al tuo foglio di stile CSS per attività come la tua:

 .no-gutter > [class*='col-'] { padding-right:0; padding-left:0; } 

Ed ecco come puoi usarlo nel tuo HTML:

 
...
...
...

Di fronte a questo problema, ho aggiunto la seguente aggiunta al mio foglio di stile CSS:

 #mainContent .container { padding-left:16px; padding-right:16px; } #mainContent .row { margin-left: -8px; margin-right: -8px; } #mainContent .col-xs-1, #mainContent .col-sm-1, #mainContent .col-md-1, #mainContent .col-lg-1, #mainContent .col-xs-2, #mainContent .col-sm-2, #mainContent .col-md-2, #mainContent .col-lg-2, #mainContent .col-xs-3, #mainContent .col-sm-3, #mainContent .col-md-3, #mainContent .col-lg-3, #mainContent .col-xs-4, #mainContent .col-sm-4, #mainContent .col-md-4, #mainContent .col-lg-4, #mainContent .col-xs-5, #mainContent .col-sm-5, #mainContent .col-md-5, #mainContent .col-lg-5, #mainContent .col-xs-6, #mainContent .col-sm-6, #mainContent .col-md-6, #mainContent .col-lg-6, #mainContent .col-xs-7, #mainContent .col-sm-7, #mainContent .col-md-7, #mainContent .col-lg-7, #mainContent .col-xs-8, #mainContent .col-sm-8, #mainContent .col-md-8, #mainContent .col-lg-8, #mainContent .col-xs-9, #mainContent .col-sm-9, #mainContent .col-md-9, #mainContent .col-lg-9, #mainContent .col-xs-10, #mainContent .col-sm-10, #mainContent .col-md-10, #mainContent .col-lg-10, #mainContent .col-xs-11, #mainContent .col-sm-11, #mainContent .col-md-11, #mainContent .col-lg-11, #mainContent .col-xs-12, #mainContent .col-sm-12, #mainContent .col-md-12, #mainContent .col-lg-12 { padding-left: 8px; padding-right: 8px; } 

Questo sovrascrive lo stile di bootstrap predefinito e rende i lati sinistro e destro e la grondaia di uguale larghezza.

Aggiungi queste classi di helper a stylesheet.less (puoi usare http://less2css.org/ per compilarle in CSS)

 .row.gutter-0 { margin-left: 0; margin-right: 0; [class*="col-"] { padding-left: 0; padding-right: 0; } } .row.gutter-10 { margin-left: -5px; margin-right: -5px; [class*="col-"] { padding-left: 5px; padding-right: 5px; } } .row.gutter-20 { margin-left: -10px; margin-right: -10px; [class*="col-"] { padding-left: 10px; padding-right: 10px; } } 

Ed ecco come puoi usarlo nel tuo HTML:

 

Sono stato bloccato con questo problema, la mia soluzione è stata la creazione di un mixin che mi permette di specificare in SCSS, la dimensione reale della grondaia che voglio …

Soluzione: 1)

 @mixin add-gutter($size) { margin-right: -$size; margin-left: -$size; > [class*="col-"] { padding-right: $size; padding-left: $size; } } .that-special-row{ @include add-gutter(7px); } 

E per usarlo …

 

La vera soluzione è nata da questo problema menzionato su github, che credo affronti lo stesso problema.

Soluzione: 2)

Un’altra soluzione, sarebbe semplicemente creare la tua class CSS personalizzata

 .small-gutters { margin-right: -10px; margin-left: -10px; > [class*="col-"] { padding-right: 10px; padding-left: 10px; } } 

Spero possa aiutare!

@Bass Jobsen e @ElwoodP hanno tentato di rispondere a questa domanda in senso inverso, dando ai margini esterni la stessa dimensione DOUBLE delle grondaie. L’OP (e anche me) stava cercando un modo per avere una grondaia SINGOLA in tutti i posti. Ecco le corrette regolazioni CSS per farlo:

 .row { margin-left: -7px; margin-right: -7px; } .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { padding-left: 7px; padding-right: 7px; } .container { padding-left: 14px; padding-right: 14px; } 

Questo lascia una gronda 14px e margine esterno in tutti i posti.

Se si utilizza sass nel proprio progetto, è ansible sovrascrivere la dimensione predefinita del gutter di bootstrap copiando le variabili sass dal file _variables.scss di bootstrap nel proprio file sass di progetto da qualche parte, come:

 // Grid columns // // Set the number of columns and specify the width of the gutters. $grid-gutter-width-base: 50px !default; $grid-gutter-widths: ( xs: $grid-gutter-width-base, sm: $grid-gutter-width-base, md: $grid-gutter-width-base, lg: $grid-gutter-width-base, xl: $grid-gutter-width-base ) !default; 

Ora i tuoi canali di graggio saranno 50px invece di 30px. Trovo che questo sia il metodo più pulito per regolare la dimensione della grondaia.