Bootstrap’s .row margin-left: -15px – perché è outdented (dai documenti)

Ho trovato questa riga nella documentazione Bootstrap a questo URL: http://getbootstrap.com/css/#grid-intro

Dice:

  • Le colonne creano grondaie (spazi tra il contenuto della colonna) tramite padding. Quella spaziatura è sfalsata in righe per la prima e l’ultima colonna tramite margine negativo su.
  • Il margine negativo è il motivo per cui gli esempi sottostanti sono superati . È così che il contenuto delle colonne della griglia è allineato con il contenuto non grigliato.

Il primo ha un senso. Tuttavia, non ho il secondo. Se guardi la pagina, gli esempi di griglia sono effettivamente superati ma ciò non allinea la griglia al resto del contenuto. Mantiene solo … um … superato. 🙂 inserisci la descrizione dell'immagine qui

Qualcuno può spiegarmi cosa stanno cercando di dire qui?

Grazie!

È necessario esaminare il contenuto all’interno delle colonne, ovvero ciò che è allineato con il resto del contenuto della pagina, poiché è ciò che è effettivamente visibile quando si utilizzano le colonne in un sito reale.

Nell’esempio docs, gli stili (border e background-color) sono applicati alle colonne solo per mostrarti come funzionano, nel vero e proprio non si applicherebbero gli stili alle colonne stesse e quindi tutto il contenuto della pagina si allineerebbe correttamente.

inserisci la descrizione dell'immagine qui

Guarda cosa succede quando spengo gli stili personalizzati sulle colonne …

inserisci la descrizione dell'immagine qui

Le proprietà col-* aggiungono 15px padding all’elemento, mentre l’elemento row applica un margine orizzontale di -15px , il che significa che sarà superato per renderlo uniforms.

Entrambi sono necessari per renderlo fluido e allineato.

Come per l’esempio, sembra che non ci siano elementi di row che li avvolgono. Come funziona e come l’hanno usato sul sito web di bootstrap non sono correlati. Non andrei solo dagli esempi nei documenti. Prova per te stesso e fatti un’idea.