Как изменить количество столбцов в сетке Bootstrap с помощью Laravel и JQuery Masonry - PullRequest
Новая
       38

Как изменить количество столбцов в сетке Bootstrap с помощью Laravel и JQuery Masonry

0 голосов
/ 23 сентября 2019

Я мало знаю о компоновке сетки Laravel и Masonry, но я знаю, как работает среда Bootstrap.

Мне нужно изменить количество столбцов в сетке Boostrap для устройств небольшого размера, таких как мобильный телефон.В настоящее время количество столбцов равно 3, поскольку используемый класс равен col-xs-4.Однако мне нужно изменить его на col-xs-6, чтобы он отображал 2 столбца.

Не думаю, что это так сложно, но я не знаю, как работает Laravel.

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

Это пример одного столбца в строке: 

<div class="container-fluid">
    <div class="row">
        <div class="fw-divider-space hidden-below-xl pt-70"></div>
        <div class="col-lg-12">
            <div data-animation="fadeInDown" class="row isotope-wrapper masonry-layout c-gutter-5 c-mb-5 animate animated fadeInDown" style="position: relative; height: 798px;">
                <div class="col-sm-3 col-lg-3 col-lgx-3 col-xl-3 col-xs-4 col-4" style="position: absolute; left: 0%; top: 0px;">
                    <div class="vertical-item item-gallery content-absolute text-center ds">
                        <a href="https://www.tusencuentros.cl/modelo/9/ver" class="item-media h-100 w-100 d-block"><img src="https://www.tusencuentros.cl/storage/fotos_perfil/9-1.jpg" alt="Modelo">
                            <div class="media-links"></div>
                        </a>
                        <a href="https://api.whatsapp.com/send?phone=56946717880" target="_blank" style="background-color: transparent;"><img src="https://clubvip.cl/storage/watsapp_logo.png" style="width: 40px; height: 40px; margin-top: 5px;"></a> <a href="tel:+56946717880" target="_blank" style="background-color: transparent;"><i aria-hidden="true" class="fa fa-phone-square" style="font-size: 36px; color: rgb(255, 255, 255); float: right;"></i></a>
                        <div class="item-content" style="background-color: rgb(233, 11, 165);">
                            <div class="item-title" style="top: -80px; width: 100%;">
                                <div style="display: inline-flex;">
                                    <p style="font-size: 14px;">CARLITA </p>
                                </div>
                                <div>
                                    <p style="font-size: 12px;">CHILENA, 20</p>
                                </div>
                                <div>
                                    <p style="font-size: 10px;">Medidas: 94-62-98</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Я ожидаю, что классы col-xs-4 будут col-xs-6.

Ответы [ 2 ]

0 голосов
/ 23 сентября 2019

Наконец, я мог бы это исправить, обнаружив, что папка с файлом, содержащим эти div, находится в непубличном месте, называемом «ресурсы».Поскольку я мало знаю о Laravel Blade, я не знал структуру каталогов.

0 голосов
/ 23 сентября 2019

Я полагаю, вы используете лезвие ларавеллы

Здесь вы можете использовать динамический класс CSS, например, 

class="col-sm-3 col-lg-3 col-lgx-3 col-xl-3 {{ $isMobile ? 'col-xs-6' : 'col-xs-4' }} col-4"

В кудрявых бланках: это мобильное устройство?если да, я буду использовать col-xs-6 , если нет, я буду использовать col-xs-4

Но вам необходимо отправить проверку $ isMobile сваш контроллер и есть очень простой компонент для этого здесь jenssegers / agent

После установки вы можете выполнить проверку мобильного устройства с помощью $ agent-> isMobile () метод

...