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