Горизонтально прокручиваемый список карт в Bootstrap

Я пытаюсь создать горизонтальный список карт, где одновременно отображаются 3 карты, а другие - горизонтально прокручиваются, например:

Это можно сделать с помощью CSS довольно легко, но я хочу сделать это с помощью Bootstrap. Bootstrap 4 поставляется с картами, как популяризированный по материальному дизайну, и они так же просты в использовании, как и все остальное в Bootstrap. Для этого примера вместо карт он также может быть регулярным div s.

Вещь, с которой я борюсь, - это создать прокручиваемый контейнер из X-карт (или div), где три из них отображаются одновременно, а остальные переполняются вправо и прокручиваются. Я не уверен, как использовать Bootstrap, чтобы карты (или divs) отображали ширину так, чтобы они показывались одновременно, а остальные лежали рядом с ними справа.

Ответ 1

Теперь, когда Bootstrap 4 Alpha 6 использует flexbox, эта горизонтальная схема прокрутки стала намного проще. Вы можете просто использовать flex-row и flex-nowrap:

<div class="container-fluid">
    <div class="row flex-row flex-nowrap">
        <div class="col-3">
            <div class="card card-block">Card</div>
        </div>
        <div class="col-3">
            <div class="card card-block">Card</div>
        </div>
        <div class="col-3">
            <div class="card card-block">Card</div>
        </div>
        <div class="col-3">
            <div class="card card-block">Card</div>
        </div>
        ...
    </div>
</div>

https://www.codeply.com/go/GoFQqQAFhN

Обновление Bootstrap 2018 4.0.0

Вышеупомянутый метод все еще работает, или вы можете использовать утилиты flexbox в контейнере карт: https://www.codeply.com/go/PF4APyGj7F

Ответ 2

Вы можете использовать bootstrap-horizon

Установка

Включить bootstrap-horizon.css после bootstrap.css

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="/bower_components/bootstrap-horizon/bootstrap-horizon.css">

Добавьте класс .row-horizon в .rows, который требует горизонтальной прокрутки. Чтобы улучшить UX, bootstrap-horizon переопределяет классы bootstrap .col-*-*, чтобы сделать базовую ширину 90% вместо 100%, что позволяет отображать небольшую часть последнего столбца.

<div class="row row-horizon">
  <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
    ...
  </div>
</div>

Пример

Ответ 3

Bootstap 4.3
Scssфайл

.card-deck-scrollable{
  @extend .card-deck;
  flex-direction: row;

  & > .card{
    @extend .mx-3;
    flex: 0 0 40% !important;/*Change to any size you want*/
    max-width: 40%;
  }
}

HTML файл

<div class="card-deck-scrollable flex-nowrap overflow-auto">
  <div class="card">
    <div class="card-body">
      <div class="card-title">Name</div>
    </div>
  </div>
</div>

Поскольку вы используете горизонтальную прокрутку, я уверен, что все карточки должны быть одинаковыми для всех карточек, поэтому @extend .card-deck; обеспечит одинаковую высоту всех карточек.