web-dev-qa-db-ja.com

Bootstrapのカードの水平方向にスクロール可能なリスト

次のように、一度に3枚のカードが表示され、他のカードは水平方向にスクロール可能なカードの水平リストを作成しようとしています。

Horizontally scrollable list of cards

これはCSSを使用して簡単に実行できますが、Bootstrapを使用してこれを実行したいと思います。 Bootstrap 4にはカードが同梱されています マテリアルデザインで普及しており、Bootstrapの他の製品と同じように簡単に使用できます。この例では、カードの代わりに通常のdivsも使用できます。

私が苦労しているのは、Xカード（またはdiv）のスクロール可能なコンテナーを作成することです。3枚のカードが一度に表示され、その他は右にあふれてスクロール可能です。 Bootstrapの使用方法がわからないので、カード（またはdiv）に幅を与えて、一度に3つ表示し、他のカードを右側に配置するようにします。

csstwitter-bootstraptwitter-bootstrap-4bootstrap-4
20
Lukas

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

2018年に更新Bootstrap 4.0.0

上記の方法でも機能します。または、カードのコンテナでflexbox utilsを使用できます。 https://www.codeply.com/go/PF4APyGj7F

11
Zim

bootstrap-horizo​​n を使用できます

インストール

Bootstrap.cssの後にbootstrap-horizo​​n.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-horizo​​nはbootstrapの.col-*-*クラスは、ベースラインの幅を100％ではなく90％にし、最後の列の小さな部分を表示できるようにします。

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

例

enter image description here

3
Mohamed Zezo