仕事でBootstrapを用いた画面開発をしています。
そんな中でタブを縦に並べる事に苦戦してしまったので、備忘録も兼ねて記事にしておきます。
同じような方がいれば、参考になれば幸いです。では、早速いきましょ！
card-bodyの中でflex-direction:columnを使うとバグる
いきなり問題の個所です。事象とソースを確認しましょう。
まず、目指していたのはこんな感じのタブです。↓
上の図のようなタブを、Bootstrapのcardの中に突っ込みたかったんですね。で、
サンプルソースをそのまま引用してみると、こんな形になります。↓
図中にも書きましたが、コンテンツの表示位置が想定と異なる結果になりました。。
