Bootstrap 3 – Perché la class della riga è più ampia del suo contenitore?

Ho appena iniziato a utilizzare Bootstrap 3. Sto avendo difficoltà a capire come funziona la class di riga. C’è un modo per evitare il padding-left e padding-right ?

 
col
col
col
col

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

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

Il problema è che la prima colonna non dovrebbe avere una mezza grondaia a sinistra, e l’ultima non dovrebbe avere una mezza grondaia sulla destra. Anziché utilizzare una sorta di class .last o .last su quelle colonne come fanno alcuni sistemi di griglia, invece impostano la class .row per avere margini negativi che corrispondono al padding delle colonne. Questo “estrae” le grondaie dalla prima e dall’ultima colonna, rendendola allo stesso tempo più ampia.

Il .row div non dovrebbe mai essere 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 stai facendo ora: aggiungi la class .container al primo

. Vedi l’ esempio di lavoro .

Vedi la mia risposta qui sotto per un post simile.

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

Fondamentalmente usi “clearfix” invece di “row”. Fa esattamente lo stesso di “riga” escludendo il margine negativo.

Ho usato la class di riga all’interno della class contenitore e ho ancora avuto qualche problema. Quando ho aggiunto margin-left: auto; margin-right: auto; margin-left: auto; margin-right: auto; alla class .row ha funzionato bene.

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

Per gli sviluppatori futuri 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 all’esterno del contenitore. Se stai riscontrando questo e stai usando il sistema di griglia di bootstrap correttamente usando le classi col -…, è probabile che tu abbia CSS aggiuntivi da qualche parte per reimpostare il riempimento sulle colonne.