Bootstrap の col-md について

Question

ruby on railsで開発を勉強中です。
Bootstrap を使用してUI を作成しています。

【現状】
col-md-3 でカラムを４分割して表示したいと思っているのですが、、、
４分割はcol-md-3 と書くだけで問題なく動作しますが、カラム同士がピッタリくっついています。

margin を設定すれば解決するかと考えましたが、
全体がズレて３分割になり、４つ目の要素は改行されております。

---

以下のイメージの様にカラムを並べたいと思います。

どなたかサポートくださいませ。

Comments

[maisumakun]

Bootstrapのバージョンはいくつですか？

[cerfweb]

htmlもご提示ください。

Answer 1

flex-nowrap で折り返さないようにします。

  <div class="container-fluid">
   <div class="row flex-md-nowrap">
    <div class="col-md-3 flex-md-fill">item1</div>
    <div class="col-md-3 flex-md-fill">item2</div>
    <div class="col-md-3 flex-md-fill">item3</div>
    <div class="col-md-3 flex-md-fill">item4</div>
   </div>
  </div>

https://getbootstrap.com/docs/4.3/utilities/flex/#wrap

Answer 2

背景色をつけた時につながるということを言いたいのでしょうか？

<div class="row">
  <div class="col-md-3">
    <div class="inner">
  		aa
    </div>
  </div>
  <div class="col-md-3">
    <div class="inner">
  		aa
    </div>
  </div>
  <div class="col-md-3">
    <div class="inner">
  		aa
    </div>
  </div>
  <div class="col-md-3">
    <div class="inner">
  		aa
    </div>
  </div>
</div>

.inner{
  background: #f00;
}