Bootstrap 4 如何根据屏幕大小显示不同的页脚导航栏内容

根据屏幕大小，我想显示不同的页脚内容

对于大屏幕，我显示：

<nav class="navbar p-0">
    <ul class="navbar-nav mr-auto">
        <li class="nav-item">left content</li>
    </ul>
    <ul class="navbar-nav m-auto">
        <li class="nav-item">center content</li>
    </ul>
    <ul class="navbar-nav ml-auto">
        <li class="nav-item">right content</li>
    </ul>
</nav>

左侧内容


中心目录


正确的内容

对于小屏幕，我希望显示：

<nav class="navbar p-0">
    <ul class="navbar-nav mr-auto">
        <li class="nav-item">left content</li>
    </ul>
</nav>

左侧内容

也许我在医院的文件里漏掉了什么

---

但是必须有一种方法来做到这一点…

您可以使用引导响应实用程序类

用于大屏幕显示

<nav class="navbar p-0 hidden-xs-down">
    <ul class="navbar-nav mr-auto">
        <li class="nav-item">left content</li>
    </ul>
    <ul class="navbar-nav m-auto">
        <li class="nav-item">center content</li>
    </ul>
    <ul class="navbar-nav ml-auto">
        <li class="nav-item">right content</li>
    </ul>
</nav>

左侧内容


中心目录


正确的内容

对于小屏幕

<nav class="navbar p-0 hidden-md-up">
    <ul class="navbar-nav mr-auto">
        <li class="nav-item">left content</li>
    </ul>
</nav>

左侧内容

---

有关更多信息，请参阅：

您可以使用引导响应实用程序类

用于大屏幕显示

<nav class="navbar p-0 hidden-xs-down">
    <ul class="navbar-nav mr-auto">
        <li class="nav-item">left content</li>
    </ul>
    <ul class="navbar-nav m-auto">
        <li class="nav-item">center content</li>
    </ul>
    <ul class="navbar-nav ml-auto">
        <li class="nav-item">right content</li>
    </ul>
</nav>

左侧内容


中心目录


正确的内容

对于小屏幕

<nav class="navbar p-0 hidden-md-up">
    <ul class="navbar-nav mr-auto">
        <li class="nav-item">left content</li>
    </ul>
</nav>

左侧内容

---

有关更多信息，请参阅：

多亏@NishiJain为我指明了正确的方向，我才能够找到一个非常简单（且干燥）的解决方案：

<nav class="navbar p-0">
    <ul class="navbar-nav mr-auto">
        <li class="nav-item">left content</li>
    </ul>
    <ul class="navbar-nav m-auto d-none d-lg-flex">
        <li class="nav-item">center content</li>
    </ul>
    <ul class="navbar-nav ml-auto d-none d-lg-flex">
        <li class="nav-item">right content</li>
    </ul>
</nav>

左侧内容


中心目录


正确的内容

---

关于显示实用程序的完整文档：

多亏@NishiJain为我指明了正确的方向，我才能够找到一个非常简单（干巴巴的）解决方案：

<nav class="navbar p-0">
    <ul class="navbar-nav mr-auto">
        <li class="nav-item">left content</li>
    </ul>
    <ul class="navbar-nav m-auto d-none d-lg-flex">
        <li class="nav-item">center content</li>
    </ul>
    <ul class="navbar-nav ml-auto d-none d-lg-flex">
        <li class="nav-item">right content</li>
    </ul>
</nav>

左侧内容


中心目录


正确的内容

有关显示实用程序的完整文档：

左侧内容


中心目录


正确的内容


左侧内容

类

d-none/block

在这种情况下应该可以正常工作

看看他自己的医生。

左侧内容


中心目录


正确的内容


左侧内容

类

d-none/block

在这种情况下应该可以正常工作

---

看看他自己的医生。

谢谢。不幸的是，

.hidden-*

类已被删除->->->我尝试使用，但未能使其正常工作…找到了修复方法。谢谢你给我指出了正确的方向！谢谢不幸的是，

.hidden-*

类已被删除->->->我尝试使用，但未能使其正常工作…找到了修复方法。谢谢你给我指出了正确的方向！