Bootstrap 4 — макет Masonry в сочетании с сеткой (макет с двумя, тремя, четырьмя и шестью столбцами)

Я пытаюсь объединить макет Masonry, используя систему сетки в Bootstrap 4. Я хочу добиться следующего:

  • Макет Masonry с двумя столбцами на устройствах XS
  • Компоновка с тремя столбцами Masonry в устройствах SM
  • Макет Masonry с четырьмя столбцами в устройствах MD
  • Макет Masonry с шестью колонками на устройствах XL

Я пробую этот код и его комбинации:

<div class="container">

    <div class="row card-columns">

            <div class="col-6 col-sm-4 col-md-3 col-xl-2 card">                    
                <div class="card-body">Top<br><br><br>Bottom</div>
            </div>

            <div class="col-6 col-sm-4 col-md-3 col-xl-2 card">
                <div class="card-body">Top<br>Bottom</div>
            </div>

            <div class="col-6 col-sm-4 col-md-3 col-xl-2 card ">
                <div class="card-body">Top<br><br>Bottom</div>
            </div>

            <div class="col-6 col-sm-4 col-md-3 col-xl-2 card">
                <div class="card-body">Top & Bottom</div>                   
            </div>                    

    </div>            

</div>

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

Карточки создаются со свойствами столбцов CSS вместо flexbox для более легкого выравнивания.

Вложение элементов div card в div card-columns внутри div row также не работает. Любые идеи приветствуются.


bootstrap-4 grid-system masonry
person Pisuke Soramame    schedule 05.07.2018    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Я нашел это решение (Интересно, что мой ящик Ubuntu хорошо работает в Firefox, но не в Chrome...)

HTML:

<div class="card-columns">

    <div class="card">                    
        <div class="card-body">Top<br><br><br>Bottom</div>
    </div>

    <div class="card">
        <div class="card-body">Top<br>Bottom</div>
    </div>

    <div class="card ">
        <div class="card-body">Top<br><br>Bottom</div>
    </div>

    <div class="card">
        <div class="card-body">Top & Bottom</div>                   
    </div> 

    <div class="card">                    
        <div class="card-body">Top<br><br><br>Bottom</div>
    </div>

    <div class="card">
        <div class="card-body">Top & Bottom</div>                   
    </div> 

</div>

Пользовательские CSS:

.card-columns {
    column-count: 2;
}

@media (min-width: 576px) {
    .card-columns {
        column-count: 3;
    }
}

@media (min-width: 768px) {
    .card-columns {
        column-count: 4;
    }
}

@media (min-width: 992px) {
    .card-columns {
        column-count: 4;
    }
}

@media (min-width: 1200px) {
    .card-columns {
        column-count: 6;
    }
}
person Pisuke Soramame    schedule 05.07.2018

arrow_upward
0
arrow_downward

Согласно документации по Bootstrap 4, контрольные точки для каждого размера экрана следующие: :

// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Чтобы изменить количество столбцов карточных столбцов, похожих на каменную кладку, нам нужно получить доступ к свойству column-count класса .card-columns.

.card-columns {
    column-count: 4;
  }

Чтобы добиться определенного количества столбцов в каждой точке останова, мы можем объявить указанное выше правило CSS в медиа-запрос. Вы пытаетесь добиться следующего:

  • Макет Masonry с двумя столбцами на устройствах XS
  • Компоновка с тремя столбцами Masonry в устройствах SM
  • Макет Masonry с четырьмя столбцами в устройствах MD
  • (Пять столбцов Masonry в устройствах LG)?
  • Макет Masonry с шестью колонками на устройствах XL

Это достигается с помощью следующих правил CSS:

.card-columns {
    column-count: 2;
}

@media (min-width: 576px) { 
    .card-columns {
        column-count: 3;
   }
}

@media (min-width: 768px) { 
    .card-columns {
        column-count: 4;
   }
}

@media (min-width: 992px) { 
    .card-columns {
        column-count: 5;
   }
}

@media (min-width: 1200px) { 
    .card-columns {
        column-count: 6;
   }
}
person josephemswiler    schedule 26.08.2018