twitter-bootstrap
Сетка вложения

Angular 2 AngularJS ASP.NET asp.net-mvc CSS HTML JavaScript jQuery PHP Ruby on Rails
Поиск…


Вступление

В Bootstrap можно использовать столбцы сетки внутри других столбцов. Это полезно при создании расширенных адаптивных макетов, которые используют несколько уровней сетки .

замечания

У нас может быть как можно больше столбцов.

Вложенные столбцы

<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>

Пример взят из [ http://getbootstrap.com/css/#grid-nesting][1]

как предполагает документация официального веб-сайта

Чтобы вложить содержимое в сетку по умолчанию, добавьте новый .row и набор столбцов .col-sm- * в существующий столбец .col-sm- *. Вложенные строки должны включать в себя набор столбцов, которые составляют до 12 или менее (не требуется, чтобы вы использовали все 12 доступных столбцов).

введите описание изображения здесь



Modified text is an extract of the original Stack Overflow Documentation
Лицензировано согласно CC BY-SA 3.0
Не связан с Stack Overflow