Использование Bootstrap Container

Question

У меня вопрос о том, какой из них лучше всего использовать контейнеры в Bootstrap.У меня есть 4 варианта ниже в качестве примера, и я хотел бы знать, какой из них лучше подходит для использования контейнеров.Различия - это просто стиль, а не сущность?Имеет ли значение порядок, в котором указаны классы, и если да, то какой порядок лучше, локально определяется первым или последним?

<!-- Latest JQuery; Must be loaded before Bootstrap -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<style>

.section-1
{
    background-color: #2f5571;
    font-size: 20px;
    text-align: center; 
    color: #fdfcfc;
    font-family: 'Lato', sans-serif;
    padding: 20px 20px; 
    margin-top: 20px; 
}

</style>


<div class="section-1">
    <p>Some text 1</p>
</div>


<div class="section-1 container">
    <p>Some text 2</p>
</div>


<div class="container section-1">
    <p>Some text 3</p>
</div>


<div class="section-1">
    <div class="container">
        <p>Some text 4</p>
    </div>
</div>

Answer 1

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

В вашем примере:

Опция # 1 не использует контейнеры, поэтому она не выиграет от своей основной привлекательности, которая является центрирующим контентом

Опция # 2 и Опция # 3 одинакова, поскольку порядок классов не должен влиять на вашу разметку.

Опция # 4 Может использоваться, если вы хотите только центрировать контент,но сохраняйте другие элементы, используя всю доступную ширину, что особенно полезно, если вы хотите, чтобы разделы имели разные цвета фона, например, но сохраняли содержимое в центре, например:

Последний вариант - использовать .container в глобальном div или section, чтобы ВСЕ содержимое на вашей странице оставалось по центру.

Кроме того, если вы используете container-fluid контейнер расширится, чтобы использовать полный viewport width, которая может потребоваться для некоторых макетов, а также не очень хорошо работать с другими, когда экран слишком широкий, и в конечном итоге выглядит так:

Answer 2

Опция № 1 не использует систему контейнеров / сеток - https://getbootstrap.com/docs/4.1/layout/overview/ - поэтому в контексте правильного использования библиотек Bootstrap (в частности, контейнеров) - это плохой вариант.

Порядок, в котором применяются селекторы CSS, не должен иметь никакого значения (в соответствии со спецификациями W3C):

https://www.w3.org/TR/selectors/#specificity

Это означает, что опции # 2 и # 3функционально идентичны.

Что касается того, как вы должны использовать класс 'контейнера' Bootstrap - это зависит от того, какого типа макет вы хотите достичь -

Контейнеры являются самыми основнымиэлемент layout в Bootstrap и обязателен при использовании нашей сеточной системы по умолчанию.Выберите из отзывчивого контейнера фиксированной ширины (что означает, что его максимальная ширина изменяется в каждой точке останова) или ширины жидкости (что означает, что он постоянно имеет ширину 100%) [...]

Как правило,содержимое (я) будет помещено в контейнер, например:

<div class="container">
    <!-- Content here. -->
</div>

. Как я полагаю, это будет вариант № 5.