47692


Bootstrap4において、`class="d-none d-md-block"`
のような形で、指定サイズ以上であれば表示する、という表現があるかと思います。  
これの、指定サイズ「以下」であれば表示する、という方法を探しております。

用途として次のようなことをしております。

[code]

    <p>あいうえお例文 <span class="nobr">あああああああああああああああああああああああ</span> あいうえお例文あいうえお例文あいうえお例文</p>
    
[/code]

この時、`.nobr` は `*.nobr{white-space:nowrap;}` としており、改行をさせたくない部分に適応しております。  
しかし、想定以上に長いものに関しては、スマートフォンの場合横にあふれてしまうため、

[code]

    <p>あいうえお例文
    <span class="nobr">ああああああああああああ<br class="d-none d-md-block" />あああああああああああ</span>
    あいうえお例文あいうえお例文あいうえお例文</p>
    
[/code]

のような形で、スマートフォンサイズなら、ここで改行を発生させる、というようにしたいと思っております。  
例えば、試していませんがメディアサイズによって異なるよう

[code]

    @media (min-width: 900px) {
        .mb-only{display:none;}
    }
    @media (max-width: 380px) {
        .mb-only{display:inline;}
    }
    
[/code]

にして、`<br class="d-none d-md-block">`を、`<br class="mb-only"
/>`のようにすれば出来なくもないかと思うのですが、Bootstrap4に何か書き方があれば、そちらの書き方を使いたいと思っております。

よろしくお願いします。


CC BY-SA 4.0
2018-08-21T05:10:00.437
47688
2018-08-21T06:09:08.917
8667
question
javascript css bootstrap4
Bootstrap4の、指定サイズ「以下」なら表示する方法


以下のリファレンスにある通り  
<https://getbootstrap.com/docs/4.1/utilities/display/#examples>  
<https://getbootstrap.com/docs/4.1/utilities/display/#hiding-elements>

`d-inline`と`d-*-none`を組み合わせればできると思います。  
例えばxsのサイズのときだけ表示する場合は

[code]

    .d-inline .d-sm-none
    
[/code]

smのサイズのときだけ表示する場合は

[code]

    .d-none .d-sm-inline .d-md-none
    
[/code]


CC BY-SA 4.0
2018-08-21T06:09:08.917
47692
2018-08-21T06:09:08.917
22665
47688
answer