Per favore spiegami quando usare le classi containere row. Non sono sicuro perché la documentazione di Bootstrap non è abbastanza chiara su questa parte.
Sto usando Bootstrap 3.
Risposte:
containerè un contenitore di rowelementi.
row gli elementi sono contenitori di colonne (i documenti lo chiamano sistema a griglia)
Inoltre, containerimposta i margini del contenuto in relazione ai comportamenti reattivi del layout.
Pertanto la containerclasse viene spesso utilizzata per creare contenuti "in scatola" basati sulle linee guida di stile del progetto Bootstrap.
Se vuoi andare "fuori dagli schemi" creando una griglia a larghezza intera puoi usare solo rowelementi con colonne all'interno (che coprono i soliti 12cols totali).
Le classi containere rowsono per gli elementi all'interno del corpo. Quindi un layout di base sarebbe:
<html>
<body>
<div class="container">
<div class="row">
<div class="col-md-xx"></div>
...
</div>
<div class="row">
<div class="col-md-xx"></div>
...
</div>
</div>
</body>
</html>
Per un layout reattivo in scatola.
Se ometti il container, otterrai un layout a larghezza intera.
Jumbotron è un buon esempio del containercomportamento. Se metti un elemento Jumbotron in un containerelemento, ha bordi arrotondati e una larghezza fissa basata sulla larghezza di risposta. Se il Jumbotron si trova all'esterno di un contenitore, si estende a tutta larghezza senza bordi.
rowelementi con colonne all'interno (che coprono i soliti 12cols totali). Penso che tu possa usare container-fluide row-fluidper questo. (Bootstrap principiante qui, prendilo con un pizzico di sale.)
Mi stavo chiedendo la stessa cosa e ho capito che sono passato alla bootstrap.cssversione 3. La risposta si trova nella riga no. 1585-1605. Pubblicherò queste righe qui per una migliore comprensione come di seguito.
.container
{
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
L'intero codice è autoesplicativo. Tuttavia, per approfondire questo aspetto, il contenitore richiederebbe 750pxse la larghezza dello schermo fosse compresa tra 768pxe992px e così via come mostra il codice. Ora, per una risoluzione dello schermo comune superiore a 1200, il contenitore richiederebbe 1170px, ma sottraendo il riempimento di 30 px( 15px+15px), lo spazio effettivo rimanente è 1140px, che è centrato sullo schermo poiché i margini sinistro e destro sono impostati su auto.
Ora, in caso di class="row" , c'è il codice seguente:
.row {
margin-right: -15px;
margin-left: -15px;
}
Quindi, se la riga è all'interno del contenitore, strapperebbe effettivamente l'imbottitura di 15 px per lato dal contenitore e utilizzerebbe lo spazio completo. Ma se la riga della classe è all'interno del tag body, tenderebbe a spostarsi fuori dall'area visibile sia sul lato sinistro che su quello destro del browser a causa dei margini negativi.
Spero sia stato chiarito.
Contenitore
Il contenitore fornisce i vincoli di larghezza su larghezze reattive. Quando le dimensioni reattive cambiano, è il contenitore che cambia. Righe e colonne sono tutte basate su percentuale, quindi non è necessario modificarle. Nota che c'è un margine di 15 px su ciascun lato, annullato dalle righe.
Righe
Le righe dovrebbero essere sempre in un contenitore.
La riga fornisce alle colonne un posto in cui vivere, idealmente con colonne che si sommano fino a 12. Agisce anche da wrapper poiché tutte le colonne fluttuano a sinistra, le righe aggiuntive non hanno sovrapposizioni quando i float diventano strani.
Le righe hanno anche un margine negativo di 15 px su ciascun lato. Il div che compone la fila sarebbe normalmente vincolato all'interno dell'imbottitura dei contenitori, toccando i bordi dell'area rosa ma non oltre. I margini negativi di 15px spingono la riga fuori sopra l'imbottitura di 15px dei contenitori, essenzialmente negandola. Inoltre, le righe ti assicurano che tutti i div al suo interno appaiano sulla propria riga, separata dalle righe precedenti e successive.
Colonne
Le colonne ora hanno una spaziatura interna di 15 px. Questo riempimento significa che le colonne toccano effettivamente il bordo della riga, che a sua volta tocca il bordo del contenitore poiché la riga ha il margine negativo e il contenitore ha il riempimento positivo. Tuttavia, il riempimento sulla colonna spinge qualsiasi cosa all'interno della colonna dove deve essere e fornisce anche il margine di 30 px tra le colonne. Non utilizzare mai una colonna al di fuori di una riga, non funzionerà.
Per maggiori informazioni ti consiglio di leggere questo articolo . È davvero chiaro e spiega bene come funziona il sistema a griglia di Bootstrap.
La classe "container" avvolge il contenuto all'interno del centro della porta di visualizzazione. L'intero contenuto con tag nel corpo può essere posizionato nei risultati della pagina visualizzata della larghezza specificata al centro della pagina.
La "riga" della classe viene utilizzata quando è necessario posizionare il contenuto in colonne con una riga, è possibile avere fino a 12 colonne in totale in ogni riga.
Nelle pratiche CSS tradizionali useresti probabilmente le seguenti classi:
wrapper, header, navigator, contents, footer
l'utilizzo delle classi precedenti può essere come questo esempio:
<body>
<div class="wrapper">
<div class="header">
</div>
<div class="navigator">
</div>
<div class="content">
</div>
<div class="footer">
</div>
</div>
</body>
In bootstrap puoi usare se lo desideri o se sei abituato al template sopra le classi bootstrap come questo esempio:
<body>
<div class="container">
<div class="col-md-12">
<h1>Header</h1>
<p>Header contents goes here</p>
</div>
<div class="col-md-12">
<nav role="navigation" class="nav navbar">
<h1>Navigation</h1>
<p>Navigation contents goes here</p>
</nav>
</div>
<div class="col-md-12">
<div class="pagination">
<h1>Page contents</h1>
<p>Webpage contents goes here</p>
</div>
</div>
<div class="col-lg-12">
<h1>Footer contents</h1>
<p>footer contents goes here</p>
</div>
</div>
</body>
Per la classe di riga è possibile utilizzare la classe di riga quando si desidera progettare un layout tabulare per la pagina, ma quando si desidera visualizzare i dati in formato tabella è necessario utilizzare la classe di tabella, ma la tabella non sarà reattiva.
Per creare un layout tabulare diverso dalle tabelle di dati, usa la classe row come in questo esempio:
<body>
<div class="container">
<div class="row">
<div class="col-sm-4" >.col-sm-4</div>
<div class="col-sm-4" >.col-sm-4</div>
<div class="col-sm-4" >.col-sm-4</div>
</div>
</div>
</body>
Devi cercare di evitare di utilizzare il layout basato su tabella e provare a utilizzare tabelle reattive come descritto qui