Bootstrap 4 кладка эффект отзывчивость - PullRequest
Новая
       7

Bootstrap 4 кладка эффект отзывчивость

0 голосов
/ 02 января 2019

Я пытаюсь использовать эффект bootstrap 4 masonry на моем сайте.Тем не менее, карты не реагируют.Это базовая страница без специальных эффектов.

Обратите внимание, что страница отлично работает при изменении размера окна браузера, но не на экране мобильного телефона.Я хочу, чтобы карточки складывались друг на друга на экранах мобильных устройств, как они появляются при изменении размера окна браузера.Вот основной HTML-код. 

@media screen and (max-width: 992px) {
    .card-columns {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
    }
}

@media screen and (max-width: 600px) {
    .card-columns {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }
}
<div class="container">
    <div class="card-columns">

        <div class="card">
            <img class="card-img-top" src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" alt="Card image cap">
            <div class="card-body">
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top" src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" alt="Card image cap">
            <div class="card-body">
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top" src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" alt="Card image cap">
            <div class="card-body">
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top" src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" alt="Card image cap">
            <div class="card-body">
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top" src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" alt="Card image cap">
            <div class="card-body">
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </div>
    </div>
</div>

Я использовал медиазапросы в CSS.Тем не менее, на маленьких экранах страница выглядит просто уменьшенной.

Вот как она выглядит на экранах мобильных устройств.

enter image description here

Если хотите, приведите ссылку на веб-сайт.чтобы просмотреть его на своем мобильном телефоне: https://cocky -hermann-3927c7.netlify.com /

Ответы [ 2 ]

0 голосов
/ 02 января 2019

В дополнение к ответу crazymatt, разрешения мобильных экранов DVGA и WXGA составляют 640 пикселей и 768 пикселей в ширину соответственно. Другими словами, ширина 600 пикселей не распространяется на широкую ширину экрана мобильного устройства. 799px - лучшая точка останова для мобильных устройств. Планшеты и ноутбуки с низким разрешением обычно начинаются с 800 пикселей; Таким образом, это означает, что вы получите макет с 3 столбцами практически на всех устройствах, не являющихся телефонами, но макет с 1 столбцом почти на всех телефонах.

0 голосов
/ 02 января 2019

Попробуйте добавить этот код на <head> вашей HTML-страницы:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Я заметил, что он работает на вашем CodePen (по крайней мере, в эмуляции Chrome), но на вашем сайте он начал работать, когда я добавил окно просмотра. Вы можете узнать больше об этом здесь , если вы заинтересованы. Надеюсь, это поможет.

...