Bootstrap 4, как выйти за пределы container?

530

17 февраля 2018, 20:55

Доброго дня. Суть такова, у меня есть container внутри него я хочу расположить на 1 половине (6 колонок) обычный блок, а вот второй блок хочу чтобы начинался с середины как продолжение предыдущего, но в ширь не ограничивался container, а продолжался до конца окна (Как он располагался бы в container-fluid). Кто-нибудь может подсказать как сделать?

Answer 1

<div class="container-fluid">
                    <div class="row">
                        <div class="col-3 col-offset-3">
                        </div>
                        <div class="col-6">
                        </div>
                    </div>
                </div>

Если правильно поняла, то на ум пришел такой вариант. Container-fluid условно делим на две части. Первая - с отступом, чтобы слева осталось пустое пространство. Вторая - до конца экрана.

Answer 2

Достаточно указать position: absolute и ширину 100%.

.second {
  position: absolute;
  width: 100%;
  right: 0;
}

.container { 
  border: solid 10px #ddd; 
} 
 
.first { 
  height: 250px; 
  border: solid 5px red; 
} 
 
.second { 
  height: 250px; 
  border: solid 5px blue; 
  position: absolute !important; 
  width: 100%; 
  right: 0; 
}

<head> 
 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> 
 
</head> 
 
<body> 
 
  <div class="container"> 
    <div class="row"> 
      <div class="first col-6"></div> 
      <div class="second col-6"></div> 
    </div> 
  </div> 
 
</body>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

выборка из трёх таблиц с GROUP BY и ORDER BY

магазин с категориями товаров

295

MySQL

Индексы PRIMARY и UNIQUE KEY для одного и того же поля

Есть ли какой-либо смысл в следующем построении индексов?

227

MySQL

Сортировка по англ. алфавиту mysql

Есть запрос:

224

MySQL

Создание запроса в базу на SQL, без PHP

Доброго времени сутокПодскажите пожалуйста, возможно ли реализовать данный код только на SQL, минуя PHP? В таблице data имеется поле (email_disp), которое...

216