仕事でBootstrapを用いた画面開発をしています。
そんな中でタブを縦に並べる事に苦戦してしまったので、備忘録も兼ねて記事にしておきます。
同じような方がいれば、参考になれば幸いです。では、早速いきましょ!
card-bodyの中でflex-direction:columnを使うとバグる
いきなり問題の個所です。事象とソースを確認しましょう。
まず、目指していたのはこんな感じのタブです。↓

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

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