質問: bootstrapのカードの水平方向にスクロール可能なリスト 次のように、一度に3枚のカードが表示され、他のカードは水平方向にスクロール可能なカードの水平リストを作成しようとしています。 これはcssを使用して簡単に実行できますが、bootstrapを使用してこれを実行したいと思います。 bootstrap 4にはカードが同梱されています マテリアルデザインで普及しており、bootstrapの他の製品と同じように簡単に使用できます。この例では、カードの代わりに通常のdivsも使用できます。私が苦労しているのは、xカード(またはdiv)のスクロール可能なコンテナーを作成することです。3枚のカードが一度に表示され、その他は右にあふれてスクロール可能です。 bootstrapの使用方法がわからないので、カード(またはdiv)に幅を与えて、一度に3つ表示し、他のカードを右側に配置するようにします。
回答: bootstrap-horizon を使用できますインストールbootstrap.cssの後にbootstrap-horizon.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-*-*クラスは、ベースラインの幅を100%ではなく90%にし、最後の列の小さな部分を表示できるようにします。<div class="row row-horizon"> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> ... </div> </div> 例