bootstrap の d-flex で横並びできない

Question

前提・実現したいこと

Ruby on Rails 5 で　Bootstrap　を使って、デザインを
整えようとしています。

発生している問題・エラーメッセージ

bootstrap の　フレックス機能を使用して、項目を
横並びさせようとしていますが、うまくいきません。

サポートをお願いいたします。

該当のソースコード

ある『html.erb』ファイルに↓のコードを書いていますが、
『Flex』が縦に並んでしまいます。

<div class="d-flex flex-row"> <div class="my-box w-25">Flex 1</div> <div class="my-box w-25">Flex 2</div> <div class="my-box w-25">Flex 3</div> </div>

他の処理で　Bootstrap　を使うことはできていますので、
Bootstrapの設定が根本的におかしいということはないと
思います。

ツールのバージョン
Rails 5.2.4.2
ruby 2.6.3p62

以下は　Gemfile.lockからです。
bootstrap (4.1.3)
autoprefixer-rails (>= 6.0.3)
popper_js (>= 1.12.9, < 2)
sass (>= 3.5.2)
bootstrap-sass (3.4.1)
autoprefixer-rails (>= 5.2.1)
sassc (>= 2.0.0)

Answer 1

ご提示いただいたコードで期待通りの動作ができないのだとすると下記でいかがでしょうか？

<div class="d-flex flex-row"> //-flexをd-flexに変更
  <div class="my-box w-25">Flex 1</div>
  <div class="my-box w-25">Flex 2</div>
  <div class="my-box w-25">Flex 3</div>
</div>

Comments

[asatosi]

すみません。スペルミスでした。

no1knowsさんの書いてくださったコードで実行しても、横並びにならないため、質問させていただきました。

[no1knows]

bootstrap-sass (3.4.1)は、Bootstrap3までしか対応していないため、flex-box(d-flex)に対応していません。
そのためこのgemを削除すれば期待通りの動きをすると思います。
公式：https://github.com/twbs/bootstrap-sass

もしBootstrap4のsassを利用したい場合は、上記リンク先に書いてあるとおり下記の利用を検討するとよいかと思います。
公式：https://github.com/twbs/bootstrap-rubygem

[asatosi]

ありがとうございました。

おかげさまで、横並びができました。

[no1knows]

それは良かったです！