1

У меня вопрос касаемо того, какие классы 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 ?

1 ответ 1

0

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 не отличается. Да они переписали их на флексбоксах, но смысл тот же.

2
  • Большое спасибо за развёрнутый ответ. 4. А может быть колонка непосредственным родителем для контейнера? И вообще в большинстве случаев приходится в контейнер, ряд или колонку вкладывать контейнер (я имею в виду непосредственно,не через несколько уровней)?
    – Kniga
    31 авг 2017 в 10:48
  • Вы можете сделать как хотите, другой вопрос, зачем это нужно, оправдано ли это и т.д. В любом случае, чтобы пользоваться классами не по правилам описанным в документации, нужно хорошо понимать как они работают, чтобы не было сюрпризов.
    – kizoso
    31 авг 2017 в 17:44

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.