BootstrapのCardの中でタブを縦に並べようとしたらハマった

Bootstrap

仕事でBootstrapを用いた画面開発をしています。
そんな中でタブを縦に並べる事に苦戦してしまったので、備忘録も兼ねて記事にしておきます。

同じような方がいれば、参考になれば幸いです。では、早速いきましょ!

スポンサーリンク

card-bodyの中でflex-direction:columnを使うとバグる

いきなり問題の個所です。事象とソースを確認しましょう。

まず、目指していたのはこんな感じのタブです。↓

出典サイト:https://web.monogusa-note.com/flexible-tabs-only-css

上の図のようなタブを、Bootstrapのcardの中に突っ込みたかったんですね。で、
サンプルソースをそのまま引用してみると、こんな形になります。↓

左がHTML、中央がCSS、右が出力結果 JSFiddleで動かした結果です

図中にも書きましたが、コンテンツの表示位置が想定と異なる結果になりました。。