Использование отдельного загрузочного контейнера для каждого столбца
Я хотел бы иметь в начальной загрузке два столбца, каждый из которых использует максимальную ширину другого контейнера.
Проблема с абсолютной позицией в этом случае заключается в том, что контейнер не знает, какой будет высота содержимого. Так что это не вариант. Содержимое должно занимать высоту контейнера.
<div class = "container--col-1 container-large--col-2">
<div class = "row">
<div class = "col-6">
COL1 should have the max-width of .container (1320px)
</div>
<div class = "col-6">
COL2 should have the max-width of .container-large (1920px)
</div>
</div>
</div>
Как это можно сделать с помощью начальной загрузки 5? Возможно ли это вообще?
Эффект, который я ищу, таков, но объединен в 1 строку:
<link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity = "sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin = "anonymous">
<div class = "container">
<div class = "row">
<div class = "col-6">
<div style = "background-color:blue;">
COL1
</div>
</div>
</div>
</div>
<div class = "container-large">
<div class = "col-6 offset-6">
<div style='background-color:green;'>
COL2
</div>
</div>
</div>Да, я. Класс контейнера по умолчанию и модифицированный контейнер-большой. Контейнер-большой — это расширение класса контейнера с более широкой максимальной шириной.
Мне не совсем понятна ваша проблема. Пожалуйста, уточните, что означает «максимальная ширина другого контейнера».
Ответы 1
В конце концов я нашел решение этой проблемы.
Я вычисляю разницу между шириной контейнеров, чтобы «заполнить» недостающее пространство, используя эту дерзкую функцию.
// Calculates the left spacing between a large and normal container.
@function large-container-fill-left($breakpoint) {
$large-container-width: 1920;
$container-width: map-get($container-max-widths, $breakpoint);
$container-width-half: calc(#{$container-width} / 2);
$margin-left: calc(100% - #{$container-width-half});
@return calc(#{$margin-left} + #{calc($grid-gutter-width / 2)});
}
Затем я использую это вычисленное значение на основе текущей точки останова для класса CSS. Так:
.large-container-fill-left {
@include media-breakpoint-up(lg) {
margin-left: large-container-fill-left(lg);
}
@include media-breakpoint-up(xl) {
margin-left: large-container-fill-left(xl);
}
@include media-breakpoint-up(xxl) {
margin-left: large-container-fill-left(xxl);
}
}
Наконец, добавляем этот класс в левый внутренний контейнер.
<div class = "container container-large" style = "background-color: lightskyblue;">
<div class = "row">
<div class = "col-6 px-0">
<div class = "container">
<div class = "row">
<div class = "col-12">
<div class = "fill-large-container" style='background-color:darkblue; height: 300px;'>
COL1
</div>
</div>
</div>
</div>
</div>
<div class = "col-6">
<div style='background-color:green; height: 300px;'>
COL2
</div>
</div>
</div>
</div>
И все готово! Теперь у нас есть левый столбец, действующий как класс-контейнер, и правый столбец, действующий как класс большого контейнера (и выходящий за пределы дизайна).
Вы имеете в виду классы
containerBootstrap? Я думаю, вы хотите применить классы-контейнеры к своим столбцам (Пример Codepen ). Обратите внимание, что это пример, потому что.row>*объявляетmax-widthпереопределение контейнеровmax-width.