Bootstrap di Twitter - Problema di posizione con il fluido di riga

Question

Attualmente sto costruendo un sito Web utilizzando il bootstrap di Twitter (che è incredibile!). ho avuto il layout utilizzando:

<div class="row"> 
    <div class="span6"></div> 
    <div class="span6"></div> 
    <div class="span6"></div> 
    <div class="span6"></div> 
</div> 

Il che funziona alla grande, ho 2 div per riga in fondo, e non abbiamo dovuto includere un contatore nel nostro ciclo di sbarazzarsi dei margini. È stato perfetto! Ma abbiamo deciso di cambiare idea su un layout fisso, quindi sono passato da .row a .row-fluid. E questo è quando il problema arriva.

so che avere qualcosa di simile:

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

e il div di lavoro con .span6 bene per la prima fila, ma poi il margin-left sui .span6 vengono visualizzati a partire dalla seconda fila, quindi il layout è, beh, ... non buono.

Sono sorpreso che funziona in modo sorprendente per il layout fisso ma non per il fluido di riga. C'è un work-around per questo? L'ho usato su tutto il mio sito, quindi dover aggiungere contatori per tutti loro ... sarebbe troppo lavoro.

Ecco JS Fiddle: http://jsfiddle.net/denislexic/uAs6k/3/

Qualsiasi aiuto apprezzato, grazie.

Answer 1

Se si conosce il numero di span per ogni riga, è possibile utilizzare un'espressione come questa:

.row-fluid [class*="span"]:nth-child(3n+1) { 
    margin-left: 0; 
} 

ad esempio: se si dispone di 3 span per ogni riga, l'espressione sopra rimuove il margine dal primo span di ciascuna riga. E quello sottostante rimuove il margin-right per l'ultimo elemento su ogni riga:

.row-fluid [class*="span"]:nth-child(3n+3) { 
    margin-right: 0; 
} 

Answer 2

.row-fluid [class*="span"]:first-child { 
margin-left: 0; 
} 

Si rimuove solo margine per il primo figlio per cui sarà necessario aggiungere un'altra classe o modificare span6 avere margin-left:0;

Answer 3

I suoi 2 esempi in realtà hanno 4 <div class="span6"></div> all'interno di un full-width 'fila' .. Aggiunta fino a '24', o due volte la larghezza significata per una 'riga' o 'riga-fluido', in base all'impostazione della griglia di 12 colonne. In pratica stai creando drop galleggianti quando ce ne sono troppi per adattarsi alla larghezza della riga genitore. (Questo è anche il motivo per cui sembra che 'margin-left: 0' non viene applicato al terzo 'span6', che sembra come se fosse la prima 'span6' di un 2 ° fila.)

In una 'riga' predefinita/fissa ', lo' span * '+' offset * 'della colonna nidificata dovrà essere minore o uguale alla colonna' span * del genitore, OPPURE se si tratta di una riga di primo livello , quindi 12, perché le larghezze "span *" fluttuanti sono espresse in pixel.

In un flessibile/fluido 'fila fluido', la larghezza delle colonne sono impostati in percentuale, così ogni fila e fila nested può aver nested colonna 'arco *' s e 'sfalsate *' s che sommano 12, ogni volta. http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem

Questo dovrebbe risolvere il problema con la configurazione "riga-liquido". http://jsfiddle.net/csabatino/uAs6k/9/

<h1>NOW this is working.</h1> 
<div class="row-fluid"> 
    <div class="span6">Content</div> 
    <div class="span6">Content</div> 
</div> 
<div class="row-fluid"> 
    <div class="span6">Content</div> 
    <div class="span6">Content</div> 
</div> 


<h1>Default fixed 'row' is working, too.</h1> 
<div class="row"> 
    <div class="span6">Content</div> 
    <div class="span6">Content</div> 
</div> 
<div class="row"> 
    <div class="span6">Content</div> 
    <div class="span6">Content</div> 
</div> 

Answer 4

Se l'applicazione non può contare e dividere gli elementi in righe, la rimozione e l'aggiunta di margin-leftpadding-right lavorato bene per me:

.gal [class*="span"] {margin-left:0; padding-right:20px;} 

http://jsfiddle.net/uAs6k/116/

Answer 5

ho appena fatto questo con jQuery invece:

$(document).ready(function(){ 
    function doFluidFirstSpan() { 
     var top = $('.thumbnails > li:first-child').position().top; 
     $('.thumbnails > li').each(function(){ 
      if($(this).position().top > top) { 
       $(this).addClass("alpha"); 
       top = $(this).position().top; 
      } 
     }); 
    } 

    doFluidFirstSpan(); 
} 

e css:

.alpha { margin-left: 0 !important; } 

Answer 6

Ho risolto il problema inserendo un div vuoto con span12 all'inizio, nel codice ma efficace nella GUI