bootstrap justify-content-centerが動かないです

Question

rails で開発しており、 bootstrap (4.4.1),bootstrap-sass (3.3.7)のgemをインストールしました。col-md-◯のような表記をするとしっかり動きますし、bundle showを実行して見てもインストール済みであると確認できています。しかし、以下のコードを実行しようとしても、justify-content-centerやjustify-content-endといったコマンドは実行されず、外見的な変化が一切ありません。もしよろしければお助け願います。よろしくお願いします。

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-3" style="background-color:red;height: 150px;">ブロックA</div>
        <div class="col-md-2" style="background-color: yellow;height: 150px;">ブロックB</div>
        <div class="col-md-3" style="background-color:blue;height: 150px;">ブロックC</div>
    </div>
    <div class="row justify-content-end">
        <div class="col-md-3 " style="background-color:orange;height: 150px;">ブロックA</div>
        <div class="col-md-2 " style="background-color: black;height: 150px;">ブロックB</div>
        <div class="col-md-3 " style="background-color:purple;height: 150px;">ブロックC</div>
    </div>
    <div class="row justify-content-start">
        <div class="col-md-3 " style="background-color:pink;height: 150px;">ブロックA</div>
        <div class="col-md-2 " style="background-color: green;height: 150px;">ブロックB</div>
        <div class="col-md-3 " style="background-color:lightblue;height: 150px;">ブロックC</div>
    </div>
</div>

Answer 1

justify-content-*は、Flexを使った機能ですので、Flexコンテナとした場合のみ動作します。.d-flexなどでflexそのものを効かせる必要があります。

Flex - Bootstrap 4

bootstrap-sass GemはBootstrap 3のものです。Bootstrap 4を使うのであればbootstrap Gemだけにしてください。

Comments

[退会済みユーザー]

```
<div class="row">
<div class="col-md-3 d-flex justify-content-center " style="background-color:orange;height: 150px;">ブロックA</div>
<div class="col-md-2 d-flex justify-content-center" style="background-color: black;height: 150px;">ブロックB</div>
<div class="col-md-3 d-flex justify-content-center" style="background-color:purple;height: 150px;">ブロックC</div>
</div>
```
こういう事でしょうか？これは動きませんでした。

[maisumakun]

いま気づいたのですが、もとのままでも意図したように配置されているように見えます（そうなのであれば、「書いていない他のCSSが干渉している」という線が出てきます）。

https://jsfiddle.net/2jLvcs71/

[maisumakun]

質問文の読み落としに気づきましたので、大きく回答を変更しました。

[退会済みユーザー]

* actioncable (5.1.6)
* actionmailer (5.1.6)
* actionpack (5.1.6)
* actionview (5.1.6)
* activejob (5.1.6)
* activemodel (5.1.6)
* activerecord (5.1.6)
* activesupport (5.1.6)
* arel (8.0.0)
* autoprefixer-rails (9.7.4)
* bindex (0.8.1)
* bootstrap (4.4.1)
* builder (3.2.4)
* bundler (1.17.3)
* byebug (9.0.6)
* coffee-rails (4.2.2)
* coffee-script (2.4.1)
* coffee-script-source (1.12.2)
* concurrent-ruby (1.1.5)
* crass (1.0.6)
* erubi (1.9.0)
* execjs (2.7.0)
* ffi (1.12.1)
* flexbox-rails (1.2.2)
* globalid (0.4.2)
* i18n (1.8.2)
* jbuilder (2.6.4)
* jquery-rails (4.3.1)
* listen (3.1.5)
* loofah (2.4.0)
* mail (2.7.1)
* method_source (0.9.2)
* mini_mime (1.0.2)
* mini_portile2 (2.4.0)
* minitest (5.14.0)
* multi_json (1.14.1)
* nio4r (2.5.2)
* nokogiri (1.10.7)
* popper_js (1.16.0)
* puma (3.9.1)
* rack (2.1.1)
* rack-test (1.1.0)
* rails (5.1.6)
* rails-dom-testing (2.0.3)
* rails-html-sanitizer (1.3.0)
* railties (5.1.6)
* rake (13.0.1)
* rb-fsevent (0.10.3)
* rb-inotify (0.10.1)
* ruby_dep (1.5.0)
* sass (3.7.4)
* sass-listen (4.0.0)
* sass-rails (5.0.6)
* sassc (2.2.1)
* sassc-rails (2.1.2)
* spring (2.0.2)
* spring-watcher-listen (2.0.1)
* sprockets (3.7.2)
* sprockets-rails (3.2.1)
* sqlite3 (1.3.13)
* thor (1.0.1)
* thread_safe (0.3.6)
* tilt (2.0.10)
* turbolinks (5.0.1)
* turbolinks-source (5.2.0)
* tzinfo (1.2.6)
* uglifier (3.2.0)
* web-console (3.5.1)
* websocket-driver (0.6.5)
* websocket-extensions (0.1.4)
rails bundle で表示したものですが他にも消さないといけないgemはありますか？
元の質問のように戻したものの動かないです。

[maisumakun]

Bootstrap 4だけで当該のコードを展開したものを上のJSFiddleに上げていますが、これが意図した挙動になっていますでしょうか？

[退会済みユーザー]

JSFiddleはよく分からないですが、意図した挙動にはなっていないです。

[maisumakun]

では、その「意図した挙動」はどのようなものでしょうか。

[退会済みユーザー]

justify-content-centerやjustify-content-endが動いておらず、全部justify-content-startのような形になっています

[maisumakun]

> justify-content-centerやjustify-content-endが動いておらず、全部justify-content-startのような形になっています

自分から見れば、（JSFiddleに上げたもので）動いています。画面幅が狭すぎてcol-md-*が全幅になっている、ということはありませんか？

[kei344]

To: Taigaaaaaaさん
> JSFiddleはよく分からないですが
maisumakunさんの提示されたURLにサンプルを用意されています。
https://jsfiddle.net/2jLvcs71/show

[退会済みユーザー]

できました！ありがとうございました！