Я бы хотел, чтобы мой внешний контейнер div был просто "контейнером" для md и lg, но контейнер-жидкость для xs и sm. Могу ли я добиться этого изначально? Нужен ли мне дополнительный CSS?
Спасибо.
Я бы хотел, чтобы мой внешний контейнер div был просто "контейнером" для md и lg, но контейнер-жидкость для xs и sm. Могу ли я добиться этого изначально? Нужен ли мне дополнительный CSS?
Спасибо.
container
и container-fluid
идентичны в точке останова xs
, так как они обе на всю ширину. Чтобы переопределить ширину для точки останова sm
, вы можете сделать это..
@media (max-width: 992px) {
.container {
width: 100%;
}
}
Демонстрация: http://codeply.com/go/dHFw0LcVPl
container
и container-fluid
работают одинаково в Bootstrap 4.
С 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;
}
}
Как уже отмечалось, это решение для 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 самостоятельно, то, возможно, вы захотите. Это совершенно новый уровень магии, который вы найдете там.
Если вы используете 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;
}