Twitter-bootstrap: come utilizzare correttamente la classe fluidodinamica?

Question

Ho difficoltà a capire come funziona la classe . Secondo lo documentation si adatta al design fluido come il design reattivo. Quindi, se ha abbastanza spazio, si adatta alla stessa riga, altrimenti passa alla riga successiva.

Tuttavia guardando questo esempio qui: https://duelify.com/

Stranamente i primi tre intestazioni articolo adatta in prima fila. Seconda fila e resto sono leggermente spinti a destra. Ma guardando l'html (sotto) non sono coinvolte classi aggiuntive per causare questo "effetto collaterale".

Perché non sono le intestazioni degli articoli montaggio in una riga. Perché c'è questa lacuna casuale? C'è un modo per farli apparire ordinati senza lacune intermedie?

Answer 1

Nel tuo caso, codice esatto può essere come

<div class="row-fluid"> 
    <div class="span4"></div> 
    <div class="span4"></div> 
    <div class="span4"></div> 
</div> 
<div class="row-fluid"> 
    <div class="span4"></div> 
    <div class="span4"></div> 
    <div class="span4"></div> 
</div> 

etc... 

In ogni row-fluid classe importo massimo di span classi devono essere fino a 12. classi Span hanno lasciato margine. Solo l'ultimo figlio in uno row-fluid non ha margine sinistro.

Guardate di nuovo ora gli esempi su Twitter Bootstrap documentation. "Per un layout a due colonne semplice, crea un file .row e aggiungi il numero appropriato di colonne .span. Poiché si tratta di una griglia di 12 colonne, ciascuna estensione può comprendere un numero di quelle 12 colonne e deve sempre aggiungere fino a 12 per ogni riga (o il numero di colonne nel genitore) "

Answer 2

Ci sono un paio di cose che succedono qui. Ricorda, per impostazione predefinita, la dimensione totale degli span in una riga fluida dovrebbe aggiungere fino a 12. C'è un bel po 'di più qui, quindi quando il css definisce la larghezza di un span4 come circa il 33% in realtà supera il 100% , quindi stanno andando a una nuova linea. Ma non si stanno ripulendo, quindi finisci con loro girando e creando colonne come nella pagina.

Il motivo per cui si dispone dello spazio a sinistra di quale sarebbe la seconda riga è che il bootstrap definisce "grondaie" per dare un margine alle colonne. A causa delle colonne in eccesso utilizzate, le vedi. C'è un css specifico per ridurre la grondaia sulla prima campata di una riga a 0, quindi perché non c'è spazio sulla prima.

Le "righe" successive hanno solo due colonne perché la presenza della grondaia addizionale elimina la matematica e fa sì che i tre span4 aumentino di oltre il 100% della larghezza, facendoli avvolgere.

Answer 3

il seguente codice funzionerà dopo contenitore (per la configurazione Responsive):.

<div class="container-fluid"> 
    <div class="row-fluid"> 
     <div class="span4"></div> 
    </div> 
    <div class="row-fluid"> 
     <div class="span4"></div> 
    </div> 
</div>