Столбцы должны быть непосредственными потомками строк?

Question

Столбцы должны быть непосредственными потомками строк, или я могу иметь другие div внутри строки, не будучи столбцом? Я работаю с drupal, и он создает много элементов div внутри контейнера или строки, которую я создал.

Например, я всегда должен следовать этой структуре:

<div class="container">
  <div class="row">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

Или я могу сделать что-то вроде этого:

<div class="container">
  <div class="row">
    <div class="something">
      Something
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="something__else">
      Something else
    </div>
  </div>
</div>

Answer 1

Причина, по которой мы следуем структуре, заключается в написании кода, который будет легко читаем как коллегами, так и вами, когда вы неизбежно вернетесь к коду через 6 месяцев.Написание кода с несовместимыми классами и структурами будет работать, но другие не смогут его прочитать.

tl; др - да, это нормально, но вы не должны этого делать.

Answer 2

Из документов Bootstrap ...

"Строки являются обертками для столбцов. Каждый столбец имеет горизонтальные отступы (называемый желобом) для управления пространством между ними. Это обивка затем противодействует в строках с отрицательными полями. Таким образом, все содержимое ваших столбцов визуально выровнено по левой стороне ... В макете сетки содержимое должно быть размещено в столбцах и только столбцы могут быть непосредственными потомками строк. "

Поэтому столбцы имеют отступы, специально предназначенные для работы внутри строки . Если вы используете не col, содержимое не будет правильно выровнено с левой (и правой) стороны, как вы можете видеть в этом примере, используя границы ...

https://www.codeply.com/go/hDcyKs2cWy

Answer 3

Мне часто помогает определение границы элементов. Так что я могу легко проверить, работает ли мой Css так, как я хочу. Как сказал Акбер, row и col - это классы, поэтому вы можете использовать их, когда захотите. Но проверьте эту ссылку: Документация сетки начальной загрузки , таким образом, вы используете фреймворк, как и должно быть. Удачи!