two-face https://blog.hatena.ne.jp/two-face/ 三日坊主の繰り返し https://two-face.hateblo.jp/ bootstrap には.card, .card-deckというクラスが存在し、自動的にカードスタイルで表示してくれる。 ↓こういうやつ カードスタイル getbootstrap.jp ただそのまま使うと横一列に並んでしまった。 なんでだろう〜と思い調べたところ、flex の影響でflex-flow: row wrap;が 効いていないようだった。 この設定を無効にすればこちらの思惑どおり表示されたので、CSS に以下を追加する。 .card { width: calc(25% - 30px); ← コンテンツを4つ表示したらwrap させるための幅指定 flex: none !importa… 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Ftwo-face.hateblo.jp%2Fentry%2F2020%2F10%2F09%2F000829" title="bootstrap のカードスタイルをいい感じに表示させる方法 - 三日坊主の繰り返し" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> https://cdn-ak.f.st-hatena.com/images/fotolife/t/two-face/20201008/20201008235728.png Hatena Blog https://hatena.blog 2020-10-09 00:08:29 rich https://two-face.hateblo.jp/entry/2020/10/09/000829 1.0 100%