Bootstrap 3 - Perché la classe di riga è più ampia del suo contenitore?

116

Ho appena iniziato a usare Bootstrap 3. Ho difficoltà a capire come funziona la classe row. C'è un modo per evitare la padding-lefte padding-right?

<div class="row" style="background:#000000">           
  <div class="col-xs-4 .col-xs-offset-1">
    col
  </div>
  <div class="col-xs-2">
    col
  </div>
  <div class="col-xs-2">
    col
  </div>
  <div class="col-xs-2">
    col
  </div>
</div>

http://jsfiddle.net/petran/rdRpx/

twitter-bootstrap twitter-bootstrap-3

— Petran
fonte

@Adrift è ancora vero? Non sono sicuro se intendi dire che non funzionano correttamente, perché li ho usati e sembrano funzionare come dovrebbero.

— Cereali

1

@ Cereale: non più. Questo è stato aggiunto nella v3.0.2

— deriva il

3

perché la riga bootstrap ha margini sinistro e destro di -15px.

Probabilmente non è un tuo problema, ma per chiunque altro abbia lo stesso tipo di problema: assicurati di avere solo un attributo di classe nei tuoi div. Li ho accidentalmente raddoppiati e ho avuto lo stesso problema.

— The One True Colter

151

In tutti i sistemi a griglia, ci sono grondaie tra ogni colonna. Il sistema di Bootstrap imposta un'imbottitura di 15 px sia a sinistra che a destra di ogni colonna per creare questa grondaia.

Il problema è che la prima colonna non dovrebbe avere mezza grondaia a sinistra e l'ultima non dovrebbe avere mezza grondaia a destra. Piuttosto che utilizzare una sorta di .firsto una .lastclasse su quelle colonne come fanno alcuni sistemi di griglia, impostano invece la .rowclasse in modo che abbia margini negativi che corrispondano al riempimento delle colonne. Questo "tira" le grondaie dalla prima e dall'ultima colonna, mentre allo stesso tempo le allarga.

Il .rowdiv non dovrebbe mai essere realmente usato per contenere qualcosa di diverso dalle colonne della griglia. Se lo è, vedrai il contenuto spostato rispetto a qualsiasi colonna, come è evidente nel tuo violino.

AGGIORNARE:

Hai modificato la tua domanda dopo che ho risposto, quindi ecco la risposta alla domanda che ora stai chiedendo: Aggiungi la .containerclasse alla prima <div>. Vedi esempio di lavoro .

— Sean Ryan
fonte

2

Le colonne della griglia sono separate da riempimento, non margine (in BS3)

— deriva il

3

Grande! Questo spiega tutto il contenuto traboccante.

— Rutwick Gangurde,

27

Con bootstrap 3.3.7 questo problema viene risolto avvolgendo .row con .container-fluid.

— dbarma
fonte

questo ha funzionato per me, anche se inizialmente pensavo che non fosse così, perché avevo la console web dello sviluppatore aperta che riduce la larghezza, ma a quanto pare rovina anche questo. L'utilizzo è .container-fluidstato suggerito anche qui: stackoverflow.com/a/23616447/5272567

— Matthias

funziona anche quando il div wrapping è di posizione absolute. grazie per il suggerimento

— InsOp

se potessi votare questa risposta più volte ... :)

— rony36

Stessa correzione per Bootstrap 4.

— Rob L

19

Vedi la mia risposta di seguito a un post simile.

Perché il bootstrap .row ha un margine sinistro predefinito di -30px?

Fondamentalmente usi "clearfix" invece di "row". Funziona esattamente come "riga" escludendo il margine negativo.

— Kyle
fonte

2

Queste classi fanno due cose diverse, anche se può sembrare che lo facciano visivamente: Clear non è così flessibile in situazioni reattive e con i sistemi a griglia il comportamento di .row è corretto.

— Todd Baur

Questo risolve il contenuto traboccante al di fuori del wrapper.

— Bhojendra Rauniyar

Ma il modo migliore è avvolgere la riga con il contenitore.

— Bhojendra Rauniyar

MIGLIORE ASWER! SU!

— Anderson Bressane

18

Ho usato la classe row all'interno della classe container e ho ancora avuto qualche problema. Quando ho aggiunto margin-left: auto; margin-right: auto;alla .rowclasse ha funzionato bene.

— Jeffrey
fonte

8

Ha funzionato a meraviglia! L'aggiunta della classe 'mx-auto' in bootstrap 4 ha risolto il problema di overflow per me.

— Michelle M.

3

@Michelle M. dovrebbe ricevere pieno credito per questa risposta.
Ha detto in uno dei commenti:

L'aggiunta della classe 'mx-auto' in bootstrap 4 ha risolto il problema di overflow per me.

Dovresti aggiornare il tuo primo divelemento in questo modo:

<div class="row mx-auto" style="background:#000000">

Non è necessario farlo per tutte le righe nidificate (se le hai).
Basta aggiungere mx-autoal più esterno row(o Righe) per evitare la barra di scorrimento verticale.
Non sovrascrivere il comportamento di tutte le righe Bootstrap aggiungendo una classe "riga" per sostituire i margini.

— MikeTeeVee
fonte

1

Per eventuali futuri sviluppatori che eseguono il debug di questo problema:

Bootstrap imposta il riempimento per le colonne di riga, quindi nessuno dei contenuti di una riga deve apparire fuori dal contenitore. Se stai riscontrando questo problema e stai usando correttamente il sistema a griglia di bootstrap usando le classi col -..., è probabile che tu abbia CSS aggiuntivo da qualche parte che reimposta il riempimento sulle colonne.

— JSideris
fonte

Oppure hai una vecchia versione di Bootstrap. Ad esempio, 3.0.0 distribuito con VS2015. Vedi github.com/twbs/bootstrap/issues/8959

— Adventure