Бутстрап 4 карточная колода с количеством столбцов на основе видового экрана

Ответ 1

Обновлено 2018 год

Если вам нужна отзывчивая колода карт, используйте утилиты видимости, чтобы принудительно обернуть каждые X столбцов с различной шириной области просмотра (точками останова)...

Bootstrap 4 отзывчивая колода карт (v 4.1)

Оригинальный ответ для Bootstrap 4 alpha 2:

Вы можете использовать сетку col-*-*, чтобы получить различные значения ширины (вместо колоды карт), а затем установить одинаковую высоту для столбцов с помощью flexbox.

.row > div[class*='col-'] {
  display: flex;
  flex:1 0 auto;
}

http://codeply.com/go/O0KdSG2YX2 (альфа 2)

Проблема в том, что без включенной flexbox card-deck использует table-cell, где становится очень трудно контролировать ширину. Начиная с Bootstrap 4 Alpha 6, flexbox используется по умолчанию, поэтому для flexbox дополнительный CSS не требуется, а класс h-100 можно использовать для увеличения высоты карточек: http://www.codeply.com/go/gnOzxd4Spk

Связанный вопрос: Bootstrap 4 - Отзывчивые карты в карточных колонках

Ответ 2

Здесь решение с Sass для настройки количества карточек на линию в зависимости от точек останова: https://codepen.io/migli/pen/OQVRMw

Он отлично работает с Bootstrap 4 beta 3

// Bootstrap 4 breakpoints & gutter
$grid-breakpoints: (
    xs: 0,
    sm: 576px,
    md: 768px,
    lg: 992px,
    xl: 1200px
) !default;

$grid-gutter-width: 30px !default;

// number of cards per line for each breakpoint
$cards-per-line: (
    xs: 1,
    sm: 2,
    md: 3,
    lg: 4,
    xl: 5
);

@each $name, $breakpoint in $grid-breakpoints {
    @media (min-width: $breakpoint) {
        .card-deck .card {
            flex: 0 0 calc(#{100/map-get($cards-per-line, $name)}% - #{$grid-gutter-width});
        }
    }
}

Ответ 3

Я заставил это работать, добавив min-width к картам:

<div class="card mb-3" style="min-width: 18rem;">
  <p>Card content</p>
</div>

Карты не опускаются ниже этой ширины, но все равно правильно заполняют каждый ряд и имеют одинаковую высоту.

Ответ 4

<div class="w-100 d-lg-none mt-4"></div>

Я создал 4 карты и поместил этот код между второй и третьей карточками, попробуйте это.

Ответ 5

Там более простое решение - установить фиксированную высоту элементов карты - заголовок и корпус. Таким образом, мы можем установить репозитивный макет со стандартной сеткой столбцов boostrap.

Вот мой пример: http://codeply.com/go/RHDawRSBol

 <div class="card-deck text-center">
    <div class="col-sm-6 col-md-4 col-lg-3">
        <div class="card mb-4">
            <img class="card-img-top img-fluid" src="//placehold.it/500x280" alt="Card image cap">
            <div class="card-body" style="height: 20rem">
                <h4 class="card-title">1 Card title</h4>
                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>

Ответ 6

Этот ответ предназначен для тех, кто использует Bootstrap 4. 1+, а также для тех, кому небезразличен IE 11

Колода карт не адаптирует количество видимых карт в соответствии с размером области просмотра.

Выше методы работают, но не поддерживают IE. С помощью метода, приведенного ниже, вы можете добиться аналогичной функциональности и адаптивных карт.

Вы можете управлять количеством карт, чтобы показать/скрыть в разных точках останова.

В Bootstrap 4. 1+ столбцы имеют одинаковую высоту по умолчанию, просто убедитесь, что ваша карта/контент использует все доступное пространство. Запустите фрагмент, вы поймете

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
    <div class="row">
        <div class="col-sm-6 col-lg-4 mb-3">
            <div class="card mb-3 h-100">

                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-lg-4 mb-3">
            <div class="card mb-3 h-100">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-lg-4 mb-3">
            <div class="card mb-3 h-100">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                </div>
            </div>
        </div>
    </div>
</div>

Ответ 7

Я использовал CSS Grid, чтобы исправить это. CSS Grid сделает все элементы в одной строке одинаковой высоты.

Хотя я не пытался сделать все элементы во всех строках одинаковой высоты.

В любом случае, вот как это можно сделать:

HTML:

<div class="grid-container">

  <div class="card">...</div>
  <div class="card">...</div>
</div>

CSS:

.grid-container {
  display: grid;  
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

Здесь полный JSFiddle.https://jsfiddle.net/bluegrounds/owjvhstq/4/

Ответ 8

Мне нравится Spanomaly простое решение выше установки стиля минимальной ширины. Обратите внимание, что он применяется к элементу карты.

Это также помогает решить еще одну проблему - карты, которые не являются частью полной строки, имеют ту же ширину, что и карты. Просто установите стиль максимальной ширины таким же, как стиль минимальной ширины.

Ответ 9

Мне потребовалось немного, чтобы понять это, но ответ заключается в том, чтобы не использовать карточную колоду, а вместо этого использовать .row и .col s.

Это делает отзывчивый набор карт со спецификацией для каждого размера экрана: 3 карты для xl, 2 для lg и md и 1 для sm и xs. .my-3 помещает прокладку сверху и снизу, чтобы они выглядели красиво.

mixin postList(stuff)
  .row
    - site.posts.each(function(post, index){
      .col-sm-12.col-md-6.col-lg-6.col-xl-4
        .card.my-3
          img.card-img-top(src="...",  alt="Card image cap")
          .card-body
            h5.card-title Card title #{index}
            p.card-text Some quick example text to build on the card title and make up the bulk of the cards content.
            a.btn.btn-primary(href="#") Go somewhere
    - })