2012-12-19 12 views
10

Mit Twitter Bootstrap, versuche ich herauszufinden, warum die letzte "Spalte" umschließt.Twitter Bootstrap Zeile mit Spannen wraps

<div class="row span4 solidBottom"> 
     <div class="span1"> 
      <label>A</label> 
     </div> 
     <div class="span1"> 
      <label>B</label> 
     </div> 
     <div class="span1"> 
      <label>C</label> 
     </div> 
     <div class="span1"> 
      <label>D</label> 
     </div> 
</div> 

Es ergibt sich:

A B C 
D 
___________ 

SPAN 4 = 300px 
Four Span1s = 240 
3 Paddings = 60 
240 + 60 = 300 

Also keine Ahnung, warum es hüllt?

Ich versuche, mehrspaltige Formulare zu machen und möchte die Spalten und Zeilen organisiert halten.

Vielen Dank.

EDIT: Hinzufügen von style="width:auto" in die Zeile löst das Problem, aber warum wickelt die 300px Standardbreite?

Antwort

10

Sie haben Recht, dass span4 300px ist, aber ich glaube, dass es einen Fehler in Ihrem HTML gibt.

Sie müssen Ihre geschachtelten Spalten in eine neue .row-Klasse einschließen. Wenn Sie dies tun, stoppt die Verpackung. Siehe http://jsfiddle.net/panchroma/UBTv4/ für und Beispiel für die Verwendung des standardmäßigen (nicht-flüssigen) Bootstrap-Gitters.

Dies ist die HTML ich verwendet habe:

<div class="container"> 

<div class="row"> 
    <div class="span4 solidBottom"> 

     <div class="row"> 
      <div class="span1"> 
       <label>A</label> 
      </div> 

      <div class="span1"> 
       <label>B</label> 
      </div> 

      <div class="span1"> 
       <label>C</label> 
      </div> 

      <div class="span1"> 
       <label>D</label> 
      </div> 

     </div> <!-- end nested row --> 

     <div class="span8"> </div> 

    </div> <!-- end parent row --> 
</div> <!-- end container --> 

Für feste Gitter, soll die Anzahl der Spalten in der verschachtelten Reihe auf die Anzahl der Spalten in der übergeordneten Spalte aufaddieren (dh in diesem Fall vier)

Wenn Sie Fluid Grids (dh Zeilen Flüssigkeit) verwenden, sollte die Anzahl der Spalten in der verschachtelten Zeile hinzufügen, bis zu 12.

+0

Sie willkommen @ user1916419 sind, ich bin zufrieden, das war hilfreich –