レスポンシブにしたい カードデッキ using bootstrap 4 固定幅カード 。ここに以下のコードを投稿しましたが、レスポンシブではありませんどうして?
<div class="card-deck">
<div class="card col-lg-2 col-md-3 col-sm-4 col-6" style="max-width: 12rem;">
<div class="card-body">
<h4 class="card-title">Title 1</h4>
<p>Small text here</p>
<small class="text-muted">3 mins ago</small>
</div>
</div>
<div class="card col-lg-2 col-md-3 col-sm-4 col-6" style="max-width: 12rem;">
<div class="card-body">
<h4 class="card-title">Title 2</h4>
<p>Small text here</p>
<small class="text-muted">3 mins ago</small>
</div>
</div>
<div class="card col-lg-2 col-md-3 col-sm-4 col-6" style="max-width: 12rem;">
<div class="card-body">
<h4 class="card-title">Title 3</h4>
<p>Small text here</p>
<small class="text-muted">3 mins ago</small>
</div>
</div>
<div class="card col-lg-2 col-md-3 col-sm-4 col-6" style="max-width: 12rem;">
<div class="card-body">
<h4 class="card-title">Title 4</h4>
<p>Small text here</p>
<small class="text-muted">3 mins ago</small>
</div>
</div>
Bootstrap 4カードデッキ固定幅カードの場合:
各カードをクラスcol-auto mb-3
(自動幅の列+ 3単位の余白)の列に配置します。
それらを中央に配置するには、justify-content-center
クラスを行に追加します。
動作するコードスニペットを次に示します(下の[コードスニペットを実行]をクリックして、ページ全体に展開します)。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid mt-4">
<div class="row justify-content-center">
<div class="col-auto mb-3">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
<div class="col-auto mb-3">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
<div class="col-auto mb-3">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
<div class="col-auto mb-3">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
<div class="col-auto mb-3">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
<div class="col-auto mb-3">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
<div class="col-auto mb-3">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
</div>
</div>
here 前述、これらのレイアウトオプションはまだ応答していません。だから私は簡単な解決策を見つけました。親を変更する<div class="card-deck">...</div>
から<div class="row">...</div>
。
ご意見をお寄せいただきありがとうございます。
デッキはカードの高さを等しくします行の追加デッキの削除は正しかったcol-lg-3 col-md-2 col-sm-12の追加電話機で4枚のデスクトップなどを1枚にします。まっすぐに見える