будет ли Bootstrap "col" классы работать с другими тегами HTML, чем div

Question

Мне было интересно, как лучше использовать классы "col" в Bootstrap.

пример 1 - я уже знаю, что этот путь действителен

<div class="row">
    <div class="col-12">
        <h1> Heading</h1>
    </div>
</div>  

пример 2 - это тоже будет хорошей практикой?

 <div class="row">
    <h1 class="col-12"> Heading</h1>    
</div>

Спасибо за ваши ответы!

Answer 1

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

<div class="row">
   <div class="col-12">
      <h1> Heading</h1>
  </div>
</div>

Answer 2

Документация Grid System включает только примеры с элементами div, и хотя стилизация CSS, применяемая Bootstrap, не ограничивается никакими тегами, а только классами (например, .col-md-6 вместо div.col-md-6 ) это лучший подход для размещения вашего контента в div, по крайней мере по двум причинам:

• Это позволит вам позже добавить другой контент в тот же столбец, например, кнопку или всплывающую подсказку после заголовка

• Позволяет улучшить стилизацию тега h1 и не применять автоматический желоб в 15px с каждой стороны от него, что может сделать выравнивание вашего курса непоследовательным

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