Question

根据屏幕尺寸，我想显示不同的页脚内容。

我展示的大屏幕：

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

可能我在

的文档中遗漏了一些东西

https://getbootstrap.com/docs/4.0/components/navbar/

但必须有办法做到这一点......

Answer 1

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

用于大屏幕显示

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

有关更多信息，请参阅：https://v4-alpha.getbootstrap.com/layout/responsive-utilities/

Answer 2

感谢@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>

有关展示工具的完整文档：https://getbootstrap.com/docs/4.0/utilities/display/

Answer 3

<nav class="navbar p-0 d-none d-md-block">
    <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 d-block d-md-none">
    <ul class="navbar-nav mr-auto">
        <li class="nav-item">left content</li>
    </ul>
</nav>

对于这种情况，班级d-none/block应该可以正常工作。

查看他自己的文档here。

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

3 个答案: