Bootstrap Grid Beispiel: Stacked-Horizontal
Wir werden ein Grundraster System, das aus auf dem Handy gestapelt beginnt / Tabletten (kleine Geräte), bevor auf Desktops horizontal zu werden (medium / large-Geräte).
Das folgende Beispiel zeigt ein einfaches "stacked-Horizontal" Zwei-Spalten-Layout, das heißt es in einer 50% / 50% Split auf allen Bildschirmen, mit Ausnahme von zusätzlichen kleinen Bildschirmen führen wird, was es wird automatisch (100%) stapeln:
Beispiel: Stacked-Horizontal
<div class="container">
<h1>Hello World!</h1>
<div
class="row">
<div class="col-sm-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div> Versuch es selber " Tipp: Die Zahlen in den .col-sm-* Klassen gibt an, wie viele Spalten die div (von 12) erstrecken sollte. Also, .col-sm-1 Spannweiten 1 Spalte, .col-sm-4 Spannweiten 4 Säulen, .col-sm-6 Spannweiten 6 Spalten, usw.
Hinweis: Achten Sie darauf , dass die Summe immer bis zu 12 addiert!
Tipp: Sie können drehen jede fester Breite Layout in ein voller Breite Layout durch die sich verändernde .container Klasse .container-fluid :
Beispiel: Fluidbehälter
<div class="container-fluid">
<h1>Hello
World!</h1>
<div class="row">
<div
class="col-sm-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div> Versuch es selber "