Come viene definita la class .row in Bootstrap?

Quando ho cercato .row nel file bootstrap.css ho ottenuto le seguenti definizioni:

 ... .row:before, .row:after, ... { display: table; content: " "; } ... .row:after ... { clear: both; } .row { margin-right: -15px; margin-left: -15px; } 

Con queste definizioni mi aspetto che la class .row comporti come segue:

  • Prima e dopo ogni riga dovrebbe esserci un elemento a livello di blocco che racchiuda uno spazio bianco . Lo spazio bianco prima di .row non deve essere cancellato e lo spazio bianco dopo .row. dovrebbe essere eliminato . – Niente di tutto ciò accade in realtà.

  • Qualsiasi elemento div con class .row dovrebbe distribuire 15px fuori dal suo elemento contenitore sia a sinistra che a destra. – Questo è osservabile con i soliti contenti div, ma non con l’elemento del corpo. Ad esempio se ci sono due div con la riga di class all’interno dell’elemento body :

 @import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"); .row div:nth-of-type(even) { background-color: darkgray } .row div:nth-of-type(odd) { background-color: lightgray } 
 
.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-12 .col-md-8
.col-xs-6 .col-md-4

Come si può vedere il testo non esce a sinistra della finestra di 15px. Inoltre, entrambe le righe sono in rendering senza spazi vuoti in mezzo. Cosa è successo al .row:after {display: table; content: " ";} .row:after {display: table; content: " ";} ?

Spiega per favore.

PS: Non so come funziona l’ @import url at-rule nell’editor SO.

Se avvolgi l’intero object in un div e aggiungi un overflow: hidden; , ottieni quanto segue, che è lo stesso che hai ottenuto sopra, senza il contenitore.

 @import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"); .row div:nth-of-type(even) { background-color: rgba(168, 172, 176, 0.6); } .row div:nth-of-type(odd) { background-color: rgba(88, 86, 84, 0.6); } #wrapper { margin: 50px; background: orange; overflow: hidden; } 
 
.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
 .row { margin-right: -15px; margin-left: -15px; } 

In questo caso, come hai detto, si diffonderà il margine 15px a sinistra ea destra anche se la riga viene aggiunta al tag body.

  .row:before, .row:after, { display: table; content: " "; } .row:after { clear: both; } 

Nel secondo caso la sua aggiunta effettiva di clearfix alla riga di class poiché class col (‘col-lg-12’) ha la proprietà float left devi aggiungere un clearfix per la class genitore.

 .row:before, .row:after{ 

display: tabella; contenuto: “”; chiaro: entrambi}