質問: Bootstrap4において、`class="d-none d-md-block"` のような形で、指定サイズ以上であれば表示する、という表現があるかと思います。 これの、指定サイズ「以下」であれば表示する、という方法を探しております。 用途として次のようなことをしております。 ``` あいうえお例文 あああああああああああああああああああああああ あいうえお例文あいうえお例文あいうえお例文 ``` この時、`.nobr` は `*.nobr{white-space:nowrap;}` としており、改行をさせたくない部分に適応しております。 しかし、想定以上に長いものに関しては、スマートフォンの場合横にあふれてしまうため、 ``` あいうえお例文 あああああああああああああああああああああああ あいうえお例文あいうえお例文あいうえお例文 ``` のような形で、スマートフォンサイズなら、ここで改行を発生させる、というようにしたいと思っております。 例えば、試していませんがメディアサイズによって異なるよう ``` @media (min-width: 900px) { .mb-only{display:none;} } @media (max-width: 380px) { .mb-only{display:inline;} } ``` にして、``を、``のようにすれば出来なくもないかと思うのですが、Bootstrap4に何か書き方があれば、そちらの書き方を使いたいと思っております。 よろしくお願いします。
回答: 以下のリファレンスにある通り `d-inline`と`d-*-none`を組み合わせればできると思います。 例えばxsのサイズのときだけ表示する場合は ``` .d-inline .d-sm-none ``` smのサイズのときだけ表示する場合は ``` .d-none .d-sm-inline .d-md-none ```