Twiter Bootstrap Frage: Wie beziehe ich die drei roten Behälter, um sie flüssig und reaktionsfähig zu machen, wie in der Abbildung unten dargestellt? Kann ich einen Container/eine Reihe in einem span* definieren? Nicht sicher, wie man solch ein Layout anpackt.Twitter Bootstrap: geschachtelte Zeilen?
Haben Sie diese Verschachtelungsreihenfolge versucht:
Sicher können Sie Reihen innerhalb anderer Spannen so tief verschachteln, wie Sie mögen.
<div class="container-fluid">
<div class="row-fluid">
<div class="span9">
<div class="span4"></div>
<div class="span4"></div>
<div class="span4"></div>
</div>
<div class="span3"></div>
</div>
</div>
das sollte für Ihre 3 Container innerhalb der 9 Reihe funktionieren.
Die [docs] (http://twitter.github.com/bootstrap/scaffolding.html) empfehlen, die inneren '.span4's in' .row-fluid' zu verpacken. Haben Sie es absichtlich weggelassen, weil es in der Praxis unnötig ist, oder war es nur ein Versehen? –
hmm, sollte es nicht span3 sein ??? – alex
@alex Fluid-Grids funktionieren anders: Jede verschachtelte Spaltenebene sollte bis zu 12 Spalten enthalten. Dies liegt daran, dass das Materialraster PERCENTAGES (keine Pixel) für die Breiteneinstellung verwendet. Also, das obige Beispiel ist perfekt, weil es ein Prozentsatz ist, in den Sie 12 innerhalb von 9 passen können. Ich denke, die Bootstrap-Dokumentation zu diesem Thema ist schlecht. – Labanino
Sie können eine Zeile innerhalb einer Zeile verschachteln, aber dann müssen Sie sicherstellen, dass die Markierung korrekt ist.
<div class="container-fluid">
<div class="row-fluid">
<div class="span9">
<div class="row-fluid">
<div class="span4">...</div>
<div class="span4">...</div>
<div class="span4">...</div>
</div>
</div>
<div class="span3">...</div>
</div>
</div>
Folgen Sie dem Link, um Arbeitsbeispiel mit diesem zu sehen. Versuchen Sie, den vertikalen Balken zwischen der HTML- und der Ergebnisansicht zu bewegen, und Sie sehen, dass das responsive Layout dann und dort funktioniert. Three Responsive columns with Twitter Bootstrap
Die doc spricht über * Fluid-Nesting * im [Fluid Grid Abschnitt System] (http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem) – Sherbrow
Upvote für das reine Diagramm: o) – maasha
@ Sherbrow, ich bin hier gelandet, weil das Dokument keine Beispiele für eine komplexe Verschachtelung mit Zeilen enthält und für diesen Anwendungsfall nicht ganz klar ist. – Renee