Как сделать так, чтобы столбец заполнял пространство смещения - PullRequest
0 голосов
/ 01 апреля 2020

Я не знаю, как правильно задать этот вопрос, но у меня проблема:

Мне нужно создать 2 представления, это мобильное представление

Теперь проблема в другом представлении

Я хочу, чтобы первый и последний столбцы заполняли оставшуюся высоту.

Это мой код

<div class="row">
    <div class="col-2 col-md-2" style="background-color: aqua;">co</div>
    <div class="col-10 col-md-6" style="background-color: yellow;">titulo</div>
    <div class="col-12 col-md-6 offset-md-2" style="background-color: red;">Descr</div>
    <div class="col-12 col-md-4" style="background-color: rebeccapurple;">Precop</div>
</div>

1 Ответ

0 голосов
/ 01 апреля 2020

Проблема в том, что линия boostrap состоит из 12 столбцов. На экране среднего размера (col-md) первый столбец (co) занимает 2 столбца, а второй (titulo) - 6 столбцов. Итак, с вашими первыми 2 столбцами вы используете 8 из 12 доступных для строки. А поскольку в третьем столбце (Descr) используется 6 столбцов, он не помещается на первой строке, поскольку первые 3 элемента занимают более 12 столбцов.

Так что вам нужно изменить размер столбцов; Если вы хотите, чтобы все они были в одной строке для примера, вам нужно, чтобы сумма всех ваших столбцов не превышала 12.

...