Комбинации вложенности классов Bootstrap

376

31 августа 2017, 19:19

У меня вопрос касаемо того, какие классы Bootstrap, предназначенные для создания адаптивного макета, могут быть вложены друг в друга. Разумеется, число теоретически возможны любые комбинации, среди которых есть бессмысленные (к примеру, .row в .row).

Но если мы ориентируемся на создание адаптивного, отзывчивого (и далее по тексту) дизайна верны ли утверждения:

1) в .container / .container-fluid мы можем вложить .row и только .row ?

2) в .row мы можем вложить .col-X-X и только .col-X-X ?

3) в .col-X-X мы можем вложить и .container / .container-fluid и .row ?

4) .container / .container-fluid может быть вложен в любой класс, в любой тег, в том числе и в Bootstrap'овский .col-X-X ?

5) .row может быть вложен как и в .container / .container-fluid, так и в .col-X-X ?

6) .col-X-X может быть вложен как и в .row, так и .container / .container-fluid ?

Answer 1

0 - .row в .row можно вкладывать, и это не бессмысленно, только не на прямую. Это делается тогда, когда вы хотите поделить например .col:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"> 
 
<div class='container'> 
  <div class='row'> 
    <div class='col-6'> 
      <div class='row'> 
        <div class='col-2'>2</div> 
        <div class='col-3'>3</div> 
        <div class='col-7'>7</div> 
      </div> 
    </div> 
  </div> 
</div>

1,2 - да, это принцип основы сетки бутстрап

3 - нет, это бессмысленно, так как контейнер если он не fluid будет иметь свою ширину, и верстка поедет, а если он не резиновый, то это вообще смысла не имеет

4 - по сути да, но сетка бутсрапа сконструирована таким образом, что в container вы вкладываете row, а затем col

5, 6 - см п 0. Нужно понимать, для чего они существуют, для наглядности можете посмотреть похожий вопрос. Контейнер должен быть в роли основного контейнера, а для тогд чтобы были отступы не заходящие за борт - нужны row и col.

Читайте документацию, там все подробно описано с примерами.

В этом смысле, построения базовой сетки бутстрап 3 от 4 не отличается. Да они переписали их на флексбоксах, но смысл тот же.