Как остановить изменяющиеся при переходе поля одного столбца контейнера

Question

Я изучаю Bootstrap, и я хочу создать простой div, который центрируется на странице.

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

Я хочу, чтобы поля постепенно уменьшались плавно , пока они не станут равными 0, если окно достаточно мало.

Я попытался явно установить макет одного столбца следующим образом:

<div class="container border">
    <div class="row">
        <div class="col-12">
            <p>container with some content</p>
        </div>
    </div>
</div>

, но результаты все те же, и точки останова все еще используются.

Answer 1

Существует два типа контейнера Bootstrap 4 : фиксированный и жидкий.

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

Если вы не хотите использовать контрольные точки, используйте класс container-fluid:

Используйте .container-fluid для контейнера полной ширины, охватывающего всю ширину области просмотра.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid border">
    <div class="row">
        <div class="col-12">
            <p>container with some content</p>
        </div>
    </div>
</div>

---

Если необходимо, вы можете вручную переопределить адаптивные настройки Bootstrap max-width.

.container.nobreakpoints {
  max-width:100%;
  width:800px; /* maximum width before margins appear */
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container border nobreakpoints">
    <div class="row">
        <div class="col-12">
            <p>container with some content</p>
        </div>
    </div>
</div>

Answer 2

Для этого не следует использовать контейнеры начальной загрузки, потому что они имеют фиксированную ширину в точках останова. Для плавного перехода вы должны вручную установить ширину контейнера в % или vw и поля в тех же единицах.