Bootstrap card使用時にカラムを横並びにできない原因と対処法

Bootstrap　card使用時にカラムが横並びにならない原因と対処法

個人的な備忘録として記事を残しておきます。

レイアウトを考えている際にco-md-2 col-md-9のカラムを横並びにして表示させようと考えていた際にinline-blockになっているにも関わらず、カラムが上下に配置されてしまう事象が発生しました。

原因

結論から述べるとbootstrapのcardを使用するとその子要素に対し、自動的にflex-direction:columnが有効になってしまうことから、card以下の要素が全て縦並びになってしまうようです。

対処法

対処法は、card以下で横並びにしたい要素に対してflex-direction:rowを与えてあげれば解決します。

一応例として挙げておくと、

<div class="card"> ->ここ以下にflex-direction:columnが有効となり、縦並びになる。
 <div class="card-body">
  <div class="column flex-direction:row"> ->flex-direction:columnを指定することでこれ以降の要素を横並びにすることができる。
   <div class="tab col-md-2">
    <div class="content col-md-9">
.
.
.

このように書いてあげればtabとcontentが無事横並びになります。