Бутстрап Контейнерная жидкость для хs, см

Ответ 1

container и container-fluid идентичны в точке останова xs, так как они обе на всю ширину. Чтобы переопределить ширину для точки останова sm, вы можете сделать это..

@media (max-width: 992px) {
   .container {
      width: 100%;
   }
}

Демонстрация: http://codeply.com/go/dHFw0LcVPl

container и container-fluid работают одинаково в Bootstrap 4.

Ответ 2

С Bootstrap 4
Обычный CSS:

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

Если вы используете Sass:

@include media-breakpoint-down(md) {
  .container {
    width: 100%;
    max-width: none;
  }
}

Demo: https://codepen.io/albertojacini/pen/KXgNqB

Ответ 3

  Как уже отмечалось, это решение для Bootstrap 4

Проблема

В настоящее время у нас имеется полноразмерный контейнер для жидкости от края до края для области просмотра xs. Затем мы установили контейнеры фиксированного размера для sm, md, lg и т.д.

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

Решение

Если вы сами компилируете Bootstrap из SCSS, вы можете просто переопределить переменную $container-max-widths, удалив max-width для точки останова sm. Это аккуратное и чистое решение, я бы порекомендовал.

Найдите в исходном коде Bootstrap (поставщик) _variables.scss:

$container-max-widths: (
  sm: 540px, // <-- we are going to remove this line
  md: 720px,
  lg: 960px,
  xl: 1140px
) !default;

Скопируйте в свой пользовательский файл и переопределите, удалив строку определения sm и удалив ключевое слово !default, например, в файле _my-variables.scss:

$container-max-widths: (
  md: 720px,
  lg: 960px,
  xl: 1140px
);

Подробнее о тематической начальной загрузке с собственными переменными SCSS.

Если вы не компилируете Bootstrap самостоятельно, то, возможно, вы захотите. Это совершенно новый уровень магии, который вы найдете там.

Ответ 4

Если вы используете Angular, вы можете использовать ngClass с троичным и иметь функцию, возвращающую true, если window меньше точки останова пикселя для lg?

main.component.html:

<div [ngClass]="isFluid() ? 'container-fluid' : 'container'">
      --your content--
</div>

main.component.ts:

isFluid() {
    return $(window).width() < 960;
}