Суть такова, у меня есть container внутри него я хочу расположить на 1 половине (6 колонок) обычный блок, а вот второй блок хочу чтобы начинался с середины как продолжение предыдущего, но вширь не ограничивался container, а продолжался до конца окна (Как он располагался бы в container-fluid). Кто-нибудь может подсказать как сделать?
Добавить комментарий
|
2 ответа
Чтобы это сделать, достаточно указать position: absolute
и ширину 100%
.
.second {
position: absolute;
width: 50%;
right: 0;
}
.container {
border: solid 10px #ddd;
}
.first {
height: 150px;
border: solid 5px red;
}
.second {
height: 150px;
border: solid 5px blue;
position: absolute !important;
width: 50%;
right: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="first col-6"></div>
<div class="second col-6"></div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-3 col-offset-3">
</div>
<div class="col-6">
</div>
</div>
</div>
Если правильно поняла, то на ум пришел такой вариант. Container-fluid условно делим на две части. Первая - с отступом, чтобы слева осталось пустое пространство. Вторая - до конца экрана.