LINUX.ORG.RU

Занять свободное пространство в bootstrap

 , ,


0

1

Имеется кусок код вида:

<div class="container-fluid p-4">
    <h3 class="mb-4"><b-breadcrumb :items="pagePath"/></h3>
    <div class="row">
        <device-types-component class="h-auto mb-4 mr-4"/>
        <android-client-update-channels-component class="h-auto mb-4 w-auto"/>
    </div>
</div>

Выглядит это вот так.

Вопрос первый: как сделать так, чтобы один из блоков занимал всю оставшуюся ширину? Вопрос второй: как сделать так, чтобы оба блока занимали всю оставшуюся ширину? Вопрос третий: как сделать так, чтобы блоки занимали всю оставшуюся доступную высоту?

Извиняюсь заранее за нубские вопросы. Я в вебе не силен.

Не понятно что внутри себя скрывают компоненты device-types-component и android-client-update-channels-component, но на первый взгляд кажется, что достаточно будет им обоим добавить класс «col», либо обернуть каждый компонент в div с классом «col» и выставить им самим height: 100%

arthas ()
Ответ на: комментарий от arthas

col не подходит, потому что я хочу, чтобы когда ширины браузеры не хватает, блоки располагались друг над другом вот так. Только чтобы у них ширина была одинаковая, максимальная по ширине всего свободного пространства.

Когда они располагаются горизонтально, я хочу что было вот так.

Внутри карты, не думаю что это принципиально:

<div class="card shadow">
    <div class="card-header py-2 d-flex flex-row align-items-center justify-content-between">
        ...
    </div>
    <div class="card-body">
        ...
    </div>
</div>

popov-aa ()
Ответ на: комментарий от popov-aa

чтобы когда ширины браузеры не хватает

То есть у обоих блоков фиксированная минимальная ширина? Тогда наверное можно обернуть их во флекс-контейнер и сделать блокам flex-grow: 1, как-то так:

<div class="d-flex flex-wrap">
    <device-types-component class="h-auto mb-4 mr-4" style="flex: 1 1 auto;" />
    <android-client-update-channels-component class="h-auto mb-4 w-auto" style="flex: 1 1 auto;" />
</div>
arthas ()
Ответ на: комментарий от arthas

Это той, что нужно! https://imgur.com/k9D4k9H https://imgur.com/ou6sU08

Спасибо большое. А не подскажите как проделать то же самое с высотой? Никак не могу добиться того, чтобы row занимал всю доступную высоту, как и его корневые потомки.

popov-aa ()