引导程序类为“ d-sm-none”的div显示在每个屏幕尺寸上

时间:2019-03-25 04:58:06

标签: html css twitter-bootstrap bootstrap-4

我已经写了这个标记:

<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>

仅显示在手机上,不能显示在其他任何尺寸的屏幕上。为什么会这样?

1 个答案:

答案 0 :(得分:0)

尝试一下:

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