ブートストラップのカードを縦並びと横並びを混ぜて表示したい。

ブートストラップのカードを３つのクラスに分けて、それぞれのクラスに3つ縦にカードを並べてから横にクラスを並べるように表示して行きたいのですが、全て縦並びになるので、改善したいです。

該当のソースコード

html
1div class="a">
2
3<div class="l">
4
5<div class="card1" style="width: 18rem;">
6  <svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>Placeholder</title><rect fill="#868e96" width="100%" height="100%"/><text fill="#dee2e6" dy=".3em" x="50%" y="50%">Image cap</text></svg>
7  <div class="card-body">
8    <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>
9  </div>
10</div>
11
12<div class="card1" style="width: 18rem;">
13  <svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>Placeholder</title><rect fill="#868e96" width="100%" height="100%"/><text fill="#dee2e6" dy=".3em" x="50%" y="50%">Image cap</text></svg>
14  <div class="card-body">
15    <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>
16  </div>
17</div>
18
19<div class="card1" style="width: 18rem;">
20  <svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>Placeholder</title><rect fill="#868e96" width="100%" height="100%"/><text fill="#dee2e6" dy=".3em" x="50%" y="50%">Image cap</text></svg>
21  <div class="card-body">
22    <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>
23  </div>
24</div>
25
26</div>
27
28<div class="c">
29
30<div class="card1" style="width: 18rem;">
31  <svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>Placeholder</title><rect fill="#868e96" width="100%" height="100%"/><text fill="#dee2e6" dy=".3em" x="50%" y="50%">Image cap</text></svg>
32  <div class="card-body">
33    <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>
34  </div>
35</div>
36
37<div class="card1" style="width: 18rem;">
38  <svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>Placeholder</title><rect fill="#868e96" width="100%" height="100%"/><text fill="#dee2e6" dy=".3em" x="50%" y="50%">Image cap</text></svg>
39  <div class="card-body">
40    <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>
41  </div>
42</div>
43
44<div class="card1" style="width: 18rem;">
45  <svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>Placeholder</title><rect fill="#868e96" width="100%" height="100%"/><text fill="#dee2e6" dy=".3em" x="50%" y="50%">Image cap</text></svg>
46  <div class="card-body">
47    <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>
48  </div>
49</div>
50
51</div>
52
53<div class="c">
54
55<div class="card1" style="width: 18rem;">
56  <svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>Placeholder</title><rect fill="#868e96" width="100%" height="100%"/><text fill="#dee2e6" dy=".3em" x="50%" y="50%">Image cap</text></svg>
57  <div class="card-body">
58    <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>
59  </div>
60</div>
61
62<div class="card1" style="width: 18rem;">
63  <svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>Placeholder</title><rect fill="#868e96" width="100%" height="100%"/><text fill="#dee2e6" dy=".3em" x="50%" y="50%">Image cap</text></svg>
64  <div class="card-body">
65    <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>
66  </div>
67</div>
68
69<div class="card1" style="width: 18rem;">
70  <svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>Placeholder</title><rect fill="#868e96" width="100%" height="100%"/><text fill="#dee2e6" dy=".3em" x="50%" y="50%">Image cap</text></svg>
71  <div class="card-body">
72    <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>
73  </div>
74</div>
75
76</div>
77
78
79</div>

css
1.card1 {
2    margin-left: 10px;
3    margin-bottom: 20px;
4}

試したこと

どのプロパティでもなかなかうまく行きませんでいた。

補足情報（FW/ツールのバージョンなど）

簡単なことかもしれませんが、ご協力お願いいたします。

m.ts10806

2021/01/27 09:31

card クラスを使わないのはなぜでしょう。 https://getbootstrap.com/docs/4.0/components/card/

yumaaaa

2021/01/29 05:12

お返事遅れ申し訳ございません。カードクラスを使用して無事解決いたしました。お力添えありがとうございます。

行動規範の内容に同意します

回答1件

ベストアンサー

こんにちは。

HTML+CSSでは、何もしない場合、ブロックレイアウトになります。
ブロックレイアウトは、何もしない場合、ブロックが縦方向に並んでいきます。
そして、ご提示のコードは、何もしていないので、ブロックが縦方向に並んでいくことになります。

通常フローでは、インライン要素はインライン方向、つまり文書の書字方向に従って、文の中で言葉が表示される方向に表示されます。ブロック要素は、文書の書字方向の中で、段落として一つが他の物の後に表示されます。従って英語では、インライン要素は左から始まり、一つが他の物の後に表示され、ブロック要素は上から始まり、ページの下に向かいます。

CSS フローレイアウト - CSS: カスケーディングスタイルシート | MDN

つまり、文字は右から左へ、段落は上から下へ配置される、ということです。
ワードなどで文書を作ったことはありますか？　あれと同様です。
これは、基本中の基本なので、しっかり理解されることをおすすめします。

つまり、横並びにするには、何かを指定しないといけない、ということです。
横並びにする方法はいろいろありますが、フレックスレイアウトが一番お手軽だと思います。
そして、Bootstrap では、.rowをつけるとその要素がフレックスコンテナになりますので、それを利用するのが手っ取り早いです。

解決方法ですが、<div class="a">→<div class="a row">としてみてはいかがでしょうか。

投稿2021/01/28 03:03