Проблема изменения размера столбца в bootstrap 4 - заставить последние столбцы заполнять ширину строки - PullRequest
Новая
       51

Проблема изменения размера столбца в bootstrap 4 - заставить последние столбцы заполнять ширину строки

0 голосов
/ 24 апреля 2018

Здравствуйте, у меня возникла проблема с обслуживанием столбца на разных экранах и номерами.

Сейчас у меня есть 3 столбца на строку на рабочем столе, 4 столбца на строку в ipad, 2 столбца на строку в мобильном телефоне

Теперь на рабочем столе я должен изменить ширину столбца, как если бы у меня было всего 7 столбцов, поэтому я отображаю 3 столбца в 1-й строке, затем следующие 3 столбца во 2-й строке и последний 7-й столбец в 3-й строке, но в последнем столбце мне нужно изменить его с этимравна ширине столбца выше 3.

Тот же самый случай, когда у меня всего 8 столбцов, я приложу картинку для более подробного объяснения

для этого требуется инструкция:)

enter image description here

код 

<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6 portfolio-girdz col-6" style="margin-left:-1px;">
        <div class="cbp-item-wrapper">
            <a href="#" class="cbp-caption cbp-singlePage">
                <div class="cbp-caption-defaultWrap">
                    <img src="/images/activities.jpg" class="img-responsive">
                </div>
                <div class="cbp-caption-activeWrap">
                    <div class="c-masonry-border"></div>
                </div>
            </a>
            <a href="/activities" class="cbp-l-grid-work-title cbp-singlePage">activities</a>

        </div>


    </div>

1 Ответ

0 голосов
/ 24 апреля 2018

Это отличный пример использования служебного класса flex-grow , недавно добавленного в Bootstrap 4.1.0. Используйте flex-grow-1 и mw-100, чтобы столбцы равномерно заполняли ширину, когда в строке больше места .... 

<div class="row">
        <div class="col-6 col-md-4 mw-100 flex-grow-1">
            <div class="card bg-info"></div>
        </div>
        ...
</div>

Демонстрация (последняя ширина заполнения столбцов)

Примечание. Это также можно сделать с помощью CSS (вместо mw-100 flex-grow-1): 

.row>.col-6 {
    max-width: 100%;
    flex-grow: 1;
}
...