<br>
<h6>
This row/deck contains two elements. You can see that even with col-md-4 it spans more than 2/3 of the width.
</h6>
<div class="flex-row">
<div class="card-deck">
<div class="card col-12 col-md-4">
</div>
<div class="card col-12 col-md-4">
</div>
</div>
</div> <br><br>
<h6>
This row/deck contains three elements. You can see that each card spaces 1/3 of the width as expected.
</h6>
<div class="flex-row">
<div class="card-deck">
<div class="card col-12 col-md-4">
</div>
<div class="card col-12 col-md-4">
</div>
<div class="card col-12 col-md-4">
</div>
</div>
</div>
</div>
https://jsfiddle.net/9e85Lb0y/
この例では、それぞれがカードデッキを含む2つのフレックス列があります。最初のデッキには2枚のカードがあり、2番目のデッキには3枚のカードがあります。すべてのカードは同一です。一番上の列のカードが広いのはなぜですか？一番上の行は一番下の行と同じ幅になると思っていました。
コラムはカードデッキの中にあることを意図していません。それらはに含まれることになっているだけです.row。カードは列の中に入るでしょう。
ブートストラップドキュメントから...
「行は列のラッパーです。..グリッドレイアウトでは、コンテンツを列内に配置する必要があり、列のみが行の直接の子になることができます。」
カードデッキのカードの幅を設定しようとしている場合は、以下を参照してください。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加