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

Я пытаюсь создать горизонтальный список карт, где 3 карты показаны в то время, а остальные находятся горизонтально прокручивать, как это:Горизонтально прокручивать список карт в Bootstrap

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

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

источник

2016-03-14 Lukas

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

Установка

Включить самозагрузки-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 переопределяет классы .col-*-* bootstrap, чтобы сделать базовую ширину 90% вместо 100%, что позволяет отображать небольшую часть последнего столбца.

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

Пример

источник

2016-03-14 20:40:22

Спасибо! Я еще не принимаю ваш ответ, потому что нашел способ сделать это «изначально» в Bootstrap 4, который я опубликую позже. Дорогие гуглеры, которые раздражены тем, что я никогда не выносил свое решение: идея заключается в том, что карта колода входила в круг. прокручиваемый контейнер и масштабируйте карддек, чтобы было показано правильное количество карт. – Lukas

@Lukas Привет! У меня такая же проблема, как и вы, можете ли вы отправить собственное решение? Некоторый код был бы классным, если у вас все еще есть его –

@VivienAdnot использовать новые утилиты flexbox как [объяснено в моем ответе] (http://stackoverflow.com/a/42117768/171456) – ZimSystem

Теперь, когда Бутстрап 4 Альфа 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

Update 2018 Bootstrap 4.0.0

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

источник

2017-02-08 15:54:34 ZimSystem

ссылка codeply не показывает ваш пример ... Можете ли вы в любом случае обновить загрузку 4-бета2, если какие-либо изменения необходимы? – IlGala

Я обновил ссылку. Должно быть одинаковым для бета 2. – ZimSystem

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

ответ

Смежные вопросы