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

Я пытаюсь реализовать функцию card-deck в bootstrap 4, чтобы сделать все мои карты одинаковыми.

Примеры, которые загружают, показывают 4 симпатичных карты, но это 4 карты в строке, независимо от области просмотра. См. Здесь код.

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

Затем я попытался добавить в некоторые классы видовых экранов разрывы на размерах экрана, но как только этот div добавится, карточная колода больше не применяется, таким образом, не делая карты равной высоте.

Как я могу добиться этого? Это недостающая функция, которая будет рассмотрена в полной версии Bootstrap 4?

Здесь скрипка: https://jsfiddle.net/crrm5q9m/

<div class="card-deck-wrapper">
  <div class="card-deck">
    <div class="card card-inverse card-success text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
      <div class="card-block">
        <blockquote class="card-blockquote">
          <p>It really good news that the new Bootstrap 4 now has support for CSS 3 flexbox.</p>
          <footer>Makes flexible layouts <cite title="Source Title">Faster</cite></footer>
        </blockquote>
      </div>
    </div>
    <div class="card card-inverse card-danger text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
      <div class="card-block">
        <blockquote class="card-blockquote">
          <p>The Bootstrap 3.x element that was called "Panel" before, is now called a "Card".</p>
          <footer>All of this makes more <cite title="Source Title">Sense</cite></footer>
        </blockquote>
      </div>
    </div>
    <div class="card card-inverse card-warning text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
      <div class="card-block">
        <blockquote class="card-blockquote">
          <p>There are also some interesting new text classes for uppercase and capitalize.</p>
          <footer>These handy utilities make it <cite title="Source Title">Easy</cite></footer>
        </blockquote>
      </div>
    </div>
    <div class="card card-inverse card-info text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
      <div class="card-block">
        <blockquote class="card-blockquote">
          <p>If you want to use cool icons in Bootstrap 4, you'll have to find your own such as Font Awesome or Ionicons.</p>
          <footer>The Glyphicons are not <cite title="Source Title">Included</cite></footer>
        </blockquote>
      </div>
    </div>
        <div class="card card-inverse card-success text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
      <div class="card-block">
        <blockquote class="card-blockquote">
          <p>It really good news that the new Bootstrap 4 now has support for CSS 3 flexbox.</p>
          <footer>Makes flexible layouts <cite title="Source Title">Faster</cite></footer>
        </blockquote>
      </div>
    </div>
    <div class="card card-inverse card-danger text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
      <div class="card-block">
        <blockquote class="card-blockquote">
          <p>The Bootstrap 3.x element that was called "Panel" before, is now called a "Card".</p>
          <footer>All of this makes more <cite title="Source Title">Sense</cite></footer>
        </blockquote>
      </div>
    </div>
    <div class="card card-inverse card-warning text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
      <div class="card-block">
        <blockquote class="card-blockquote">
          <p>There are also some interesting new text classes for uppercase and capitalize.</p>
          <footer>These handy utilities make it <cite title="Source Title">Easy</cite></footer>
        </blockquote>
      </div>
    </div>
    <div class="card card-inverse card-info text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
      <div class="card-block">
        <blockquote class="card-blockquote">
          <p>If you want to use cool icons in Bootstrap 4, you'll have to find your own such as Font Awesome or Ionicons.</p>
          <footer>The Glyphicons are not <cite title="Source Title">Included</cite></footer>
        </blockquote>
      </div>
    </div>
  </div>
</div>

Ответ 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
    - })