Может ли контейнер (не контейнер-жидкость) иметь ширину 100%, когда область просмотра <XXXpx с Bootstrap 4?

Question

Я использую Bootstrap 4 и замечаю, что теряю драгоценную горизонтальную недвижимость на каждой точке останова. Я хотел бы, чтобы внешний контейнер имел ширину 100% всякий раз, когда браузер <1200 пикселей. </p>

Я добавил это в свой CSS:

@media (max-width: 1199px) {
  body > .container {
    width: 100%;
    max-width: 1140px;
  } 
}

Я использовал 1140px в качестве ширины, потому что в документации сказано, что максимальная ширина элемента с .contianer может быть.

Вы можете увидеть это здесь .

Когда я изменяю размер браузера, все подстраивается, как я и предполагал, но разве это просто случай, когда удача и что изменение ширины от основных значений Bootstrap полностью поднимает сетку? Есть ли здесь «правильный» способ сделать это, используя .container-fluid?

Answer 1

Таким образом, вы хотите, чтобы ваш контейнер вел себя так же, как и .container-fluid, когда размер вашего окна просмотра меньше 1200 пикселей. Я думаю, ответ Патрика - самый правильный способ сделать это (путем изменения исходного файла), но если вы не хотите этого делать, то я думаю, что ваш метод в порядке.

Однако я думаю, что CSS, который вы используете в вашем наборе правил, может быть пересмотрен. Вы можете установить для свойства max-width значение none, которое является значением по умолчанию для этого свойства. Это приводит к сбросу того, что CSS Bootstrap применяет к этому свойству.

@media (max-width: 1199px) {
    body > .container {
        width: 100%;
        max-width: none;
    } 
}

Статья MDN, показывающая none в качестве значения по умолчанию для max-width:
https://developer.mozilla.org/en-US/docs/Web/CSS/max-width#Values

Answer 2

Вот точное решение вашего вопроса: https://www.beyondjava.net/how-to-add-a-new-breakpoint-in-bootstrap

Когда вы используете Bootstrap 4, вы должны использовать его основные функции, такие как media-breakpoints.

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

ПРИМЕЧАНИЕ: в этом случае lg обозначает ваш собственный выбор, для которого вы хотите задать значение 1200px

.

В этом случае, если вы сконфигурируете свой boostrap для запуска классов lg на 1200px, то, если вы добавите следующий код, на каждом экране, который менее широк, чем 1200px, класс контейнера будет 100% по ширине.

@include media-breakpoint-down(lg){
    .container{
        width: 100%;
        max-width: 1140px;
    }
}