Siatka Bootstrap — ułożona w stos w poziomie
Przykład siatki Bootstrap: Ułożone w poziomie
Stworzymy podstawowy system siatek, który zaczyna się na dodatkowych małych urządzeniach, a następnie staje się poziomy na większych urządzeniach.
Poniższy przykład pokazuje prosty układ dwukolumnowy „ułożony w poziome”, co oznacza, że spowoduje podział 50%/50% na wszystkich ekranach, z wyjątkiem bardzo małych ekranów, które zostaną automatycznie ustawione w stos (100%):
col-sm-6
col-sm-6
Przykład: Ułożone w poziomie
<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>
Wskazówka: liczby w .col-sm-*klasach wskazują, ile kolumn powinien obejmować div (z 12). Tak więc .col-sm-1obejmuje 1 kolumnę, .col-sm-4obejmuje 4 kolumny,
.col-sm-6obejmuje 6 kolumn itd.
Uwaga: Upewnij się, że suma zawsze wynosi 12!
Wskazówka: możesz zmienić dowolny układ o stałej szerokości w układ o pełnej szerokości , zmieniając .containerklasę na .container-fluid:
Przykład: pojemnik na płyn
<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>