bootstrap 4のd-none等が機能しません

Question

bootstrap4の表示ユーティリティ

今、BiNDupを使って私用のサイトを作成しています。
つい最近、bootstrap4を導入しました。

ナビゲーションバーを作る際にbootstrapに入っている表示ユーティリティ(d-md-block等)を使用しているのですが、上手くいきません。

ブラウザとしてchromeを使用し、ブラウザ全体の幅を狭くしてみたところ、d-noneは機能します。
ただ、chromeの検証をしてみたり、スマホで見てみたりするとなぜかd-noneが機能せず、pc版とスマホ版の使い分けができなくなってしまっています。

d-noneのみでなくd-sm-blockなど他でも機能しませんでした。

ソースコード

複数のページで使用するのでJSを使用しています。

function navbar(){
    let html = "";
    html +=
    '\
    <div class="container-fluid">\
        <div class="d-none d-sm-block nav-parent">\
            <!-- pc版の表示 -->\
        </div>\
    </div>\
    <div class="d-sm-none">\
        <ul class="nav navbar-nav navbar-right nav-back">\
            <!-- スマホ版の表示 -->\
        </ul>\
    </div>\
    ';
    document.write(html);
}

呼び出し箇所

<script type="text/javascript">navbar();</script>

試したこと

スマホ版の時は__container-fluid__の入れ子にしたくないので別の__div__に入れています。
Edgeでは、要素の検査をしても、ブラウザ全体を狭くしても機能していました。

補足

BiNDupも最近使い始めたこともあり、知識が浅はかなところがありますが、解決案など教えてくださると助かります。
初めて質問しましたので、至らないところがあると思いますが、知恵を貸していただけると嬉しいです。
よろしくお願いいたします。

Comments

[x_x]

navbar()呼び出し個所も書いてください

[退会済みユーザー]

？
<!-- スマホ版の表示 -->
d-sm-none つまり スマホでは非表示

<!-- pc版の表示 -->
d-none d-sm-block つまり スマホで表示、PCでは非表示

コメントが間違えてる

[Tsumu]

d-sm-noneは576px以上で非表示(スマホ)
d-noneとd-sm-blockで0～576で非表示、576以上でブロック表示(pc)
という解釈なのですが間違っていますか…？

Answer 1

Bootstrap4のd-sm-○○はwidth:576pxがブレイクポイントとなりますので、スマホでもそれ以上の大きい画面だったり横置きにしたりすると変わります。お持ちのスマホのサイズをお確かめください。

Comments

[Tsumu]

自分のスマホの幅を調べてみたら576pxを越えてました。
smの範囲外ということには納得がいきましたありがとうございます。
でも、chromeの検証機能で幅を576px以下にしてもd-sm-○が働かないのはなぜなのでしょうか。

[cerfweb]

私の環境でコードを再現した限りではChromeの検証でも幅575pxと576pxで表示が切り替わりますので、どういうことか良くわかりません。