html - 具有 Bootstrap 类 "d-sm-none"的 div 显示在每个屏幕尺寸上

Question

我写了这个标记:

<nav class="navbar navbar-expand-lg">
<a class="navbar-brand overflow-hidden pr-3" href="@Url.Action("Index","Home")">
    <!--<img src="~/Content/Theme/images/logo-dark.png" alt="" />-->
    <img src="~/Content/Theme/images/Velosi/applusLogo.jpg" style="height:50px" alt="" />
</a>

<div class="d-sm-none">
    <h3>THIS SHOULD BE ONLY DISPLAYED ON MOBILE PHONES</h3>
</div>

<button class="navbar-toggler" type="button" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <div class="hamburger hamburger--emphatic">
        <div class="hamburger-box">
            <div class="hamburger-inner"></div>
        </div>
    </div>
</button>

我期待

<div class="d-sm-none">
    <h3>THIS SHOULD BE ONLY DISPLAYED ON MOBILE PHONES</h3>
</div>

只显示在手机上，不会超出手机，但它会显示在所有屏幕尺寸上。这是为什么？

Answer 1

试试这个:

<div class="d-none d-sm-none d-md-block">