twitter-bootstrap
Zagnieżdżanie siatki

Angular 2 AngularJS ASP.NET asp.net-mvc CSS HTML JavaScript jQuery PHP Ruby on Rails
Szukaj…


Wprowadzenie

W Bootstrap można używać kolumn siatki wewnątrz innych kolumn. Jest to pomocne podczas tworzenia zaawansowanych układów responsywnych, które wykorzystują wiele warstw siatki .

Uwagi

W powyższy sposób możemy mieć jak najwięcej kolumn.

Zagnieżdżanie kolumn

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

Przykład pochodzi z [ http://getbootstrap.com/css/#grid-nesting][1]

jak sugeruje dokumentacja oficjalnej strony internetowej

Aby zagnieździć zawartość za pomocą domyślnej siatki, dodaj nowy .row i zestaw kolumn .col-sm- * w istniejącej kolumnie .col-sm- *. Zagnieżdżone wiersze powinny zawierać zestaw kolumn, które dodają maksymalnie 12 lub mniej (nie jest wymagane użycie wszystkich 12 dostępnych kolumn).

wprowadź opis zdjęcia tutaj



Modified text is an extract of the original Stack Overflow Documentation
Licencjonowany na podstawie CC BY-SA 3.0
Nie związany z Stack Overflow