Нужно ли размещать весь контент, даже если это всего один столбец, внутри строк?

Question

В Bootstrap все содержимое, даже, например, простой блок текста, помещенный в середине страницы, должно быть размещено внутри столбцов и строк. Кажется, мой веб-сайт работает нормально:

<div class="container-fluid">
   <h2>My Heading</h2> 
   <p>This Is Content On the page</p> 
</div>

Тем не менее, мне сказали, что так должно быть:

<div class="container-fluid">
   <h2>My Heading</h2> 
   <div class="row"> 
      <div class="col">I'm content inside the grid</div> 
   </div> 
</div>

Тем не менее, на некоторых шаблонах в начальной загрузкеСам сайт, они не всегда используют столбцы и строки.

Я действительно запутался ...

Спасибо

Answer 1

Нет, не весь контент нужно размещать в .row с.

.row s и .col s просто предоставляют вам настраиваемую сеточную систему (т. Е. Количество столбцов, размеры желоба, точки останова реагирования - вот некоторые вещи, которые можно настроить), направленные на отображение контента по-разномуна различной ширине страницы. Это (а также разделение строки на 12 столбцов) - то, для чего это было разработано.

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

Так, например, это совершенно правильно и может быть замечено в различных примерах Bootstrap:

<div class="container">
  <div class="row">
     <div class="col">
       ... normal layout cols here
     </div>
  </div>
  <div> 
     your custom stuff here. you need to provide responsiveness CSS rules for this content.
     Out of the box, being a `<div>`, this will fill all the available width
     if, for example, it was included in a `.container-fluid`, 
     it would span the entire browser window, at all screen widths.
  </div>
  <div class="row">
     <div class="col">
       ... more normal layout here...
     </div>
  </div> 

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

Answer 2

В этом базовом примере все работает отлично, особенно если заголовок центрирован. Использование другого подхода для сетки Bootstrap, как правило, не очень хорошая идея.

Из Bootstrap документы :

В макете сетки содержимое должно размещаться в столбцах итолько столбцы могут быть непосредственными потомками строк.

• Поскольку проблемы выравнивания будут возникать в долгосрочной перспективе.
• Во-вторых, когда вы начнете использовать SASS с Bootstrap и измените сеточные переменные, тогдавсе остается выровненным и управляется из одного места.

В вашем примере, если вы хотите выровнять заголовок, вам нужно добавить margin-left , чтобы он был выровнен с Я нахожусь внутри сетки .

Посмотрите на этот пример, как все выравнивается с строками / столбцами и без : https://codepen.io/LaCertosus/pen/KKKzVqR

<div class="container-fluid mt-5">
  <div class="row">
    <div class="col">
      This text is inside <b>row</b> and <b>col</b>
    </div>
  </div>
  <div class="row">
    This text is only inside <b>row</b>
  </div>
  <div class="col">
    This text is only inside <b>col</b>
  </div>
  <div>
    This text is only <b>container</b>
  </div>
</div>
<div>
  This text is outside <b>container</b>
</div>

Правильный вопрос - спросить, почему я должен генерировать столько шаблонов, но это произойдет в конечном итоге, когда элементы должны выровняться и масштабироваться при разных размерах экрана.