Bootstrap 4 сетки полной ширины

Question

Я не могу понять, как заставить сетки расширяться до полной ширины контейнера, независимо от количества столбцов

<div class="container">
  <div class="row">
     <div class="col-md-2 first"></div>
     <div class="col-md-9 second"></div>
  </div>
</div>

В приведенном выше примере отображаются 2 встроенных столбца и полная ширина .row. Однако, если я удаляю первый div (сохраняя тот же код), второй div изменит свою позицию влево и сохранит исходную ширину. Мне нужно, чтобы он растянулся на всю ширину контейнера. Причина, по которой мне это нужно, заключается в том, что у меня будет несколько условных выражений php, которые не дадут его отобразить, и в этом случае я хочу, чтобы шаблон изменился, а второй div - быть полной ширины и положение на середине.

Я нашел ответ со следующим CSS, который действительно работал, но он также испортил адаптивную структуру, и мне, вероятно, придется его исправлять до конца:

CSS:

.row{
    display: table;
    width: 100%;
}

.first, .second{
    display: table-cell;
    float: none;
}

.second{
    width: 100%;
}

Поскольку я новичок в Bootstrap, мне было интересно, есть ли какой-нибудь встроенный класс, который решает эту проблему? Спасибо

Answer 1

Я не уверен, почему вы используете display:table. Просто используйте Bootstrap 4 сетка с автоматическим макетом , а вторая заполнит ширину, если первая отсутствует / скрыта.

"Автоматическое расположение столбцов сетки flexbox также означает, что вы можете установить ширину одного столбца и имеют размеры столбцов автоматически изменяются вокруг это. "

https://www.codeply.com/go/igkSq57Vwn

<div class="row">
     <div class="col-md-2 first"></div>
     <div class="col-md second"></div>
</div>

Answer 2

В этом случае просто укажите первый div как col-2, а второй как col.

col будет иметь ширину 100%, если col-2 отсутствует, но если он есть, col заполнит оставшиеся столбцы.

Ознакомьтесь с документацией Grid system .