bootstrap のカードスタイルをいい感じに表示させる方法

bootstrap には.card, .card-deckというクラスが存在し、自動的にカードスタイルで表示してくれる。

↓こういうやつ

ただそのまま使うと横一列に並んでしまった。

なんでだろう〜と思い調べたところ、flex の影響でflex-flow: row wrap;が効いていないようだった。

f:id:two-face:20201009000505p:plain

この設定を無効にすればこちらの思惑どおり表示されたので、CSS に以下を追加する。

.card {
  width: calc(25% - 30px);  ← コンテンツを4つ表示したらwrap させるための幅指定
  flex: none !important;  ← flex を無効化
  margin: 10px;  ← カード幅の調整
}

無事思ったとおり表示できるようになった。

bootstrap を利用しない場合はここに記載された設定をすればよさそう。

三日坊主の繰り返し