在 Bootstrap 中禁用响应式(移动)导航栏 [英] Disable responsive (mobile) navbar in Bootstrap

问题描述

有没有办法在 bootstrap 4 中禁用响应式导航栏?我不想要下拉菜单，因为在移动版本中仍然可以看到品牌旁边的 2 个链接.另外，我想知道是否可以将链接放在栏的右侧.Pull-xs-right 似乎无法正常工作.

我当前的代码如下所示:

<nav class="navbar navbar-fixed-top navbar-toggleable-sm navbar-light bg-faded"><a href="/" class="navbar-brand">PIM</a><ul class="nav navbar-nav pull-xs-right"><li class="nav-item"><Link class="nav-link" to="/login">登录</Link></li><li class="nav-item"><Link class="nav-link" to="/signup">注册</Link></li></nav>

非常感谢.

解决方案

Bootstrap 5(2021 年更新)

navbar-expand* 类仍在 Bootstrap 5 中使用.因此，如果您想防止 Navbar 折叠(垂直堆叠)，请使用 navbar-expand.由于填充的变化，Bootstrap 5 Navbars 确实需要一个内部容器.

---

Bootstrap 4(原始答案)

最简单的方法是使用 navbar-toggleable-xl navbar-expand 类(现在在 Bootstrap 4) 以便菜单在所有宽度上都不可移动(水平)..

<a class="navbar-brand";href=#">导航栏</a><div class="navbar-collapse collapse"><ul class="navbar-nav"><li class="nav-item"><a class="nav-link";href=#">链接</a><li class="nav-item"><a class="nav-link";href=#">链接</a><li class="nav-item"><a class="nav-link";href=#">链接</a>

</nav>

演示:Bootstrap 4 禁用响应式导航栏

您还可以使用 flexbox 实用程序来防止小屏幕上的垂直导航栏.flex-nowrap flex-row 允许导航栏在所有宽度上保持水平...

<a href="/";class=navbar-brand">PIM</a><ul class="nav navbar-nav flex-row"><li class="nav-item"><a class="nav-link pr-3"href=/login">登录</a></li><li class="nav-item"><a class="nav-link"href="/signup">注册</a></li></nav>

工作原理:

navbar-expand -- 始终水平，不可折叠
navbar-expand-xl -- 折叠成移动 <1200 像素
navbar-expand-lg -- 折叠成移动 <992像素
navbar-expand-md -- 折叠成移动 <768 像素
navbar-expand-sm -- 折叠成移动 <576 像素

no navbar-expand -- 始终移动，折叠(默认)

http://codeply.com/go/z9VJTOBuaS

is there a way to disable the responsive navBar in bootstrap 4? I don't want the dropdown as in the mobile version it's still possible to see the 2 links next to the brand. As a plus, I'd like to know if it's possible to put the links to the right in the bar. Pull-xs-right doesn't seem to work correctly.

My current code looks like this:

<nav class="navbar navbar-fixed-top navbar-toggleable-sm navbar-light bg-faded">
    <a href="/" class="navbar-brand">PIM</a>
    <ul class="nav navbar-nav pull-xs-right">
        <li class="nav-item"><Link class="nav-link" to="/login">Login</Link></li>
        <li class="nav-item"><Link class="nav-link" to="/signup">Sign up</Link></li>
    </ul>
</nav>

Thanks very much in advance.

解决方案

Bootstrap 5 (update 2021)

The navbar-expand* class are still used in Bootstrap 5. Therefore if you want to prevent the Navbar from collapsing (stacking vertically) use navbar-expand. Due to changes in padding, Bootstrap 5 Navbars do require an inner container.

---

Bootstrap 4 (original answer)

The simplest way is using the navbar-toggleable-xl navbar-expand class (now in Bootstrap 4) so that the menu is non-mobile (horizontal) at all widths..

<nav class="navbar navbar-expand navbar-dark bg-primary">
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="navbar-collapse collapse">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
</nav>

Demo: Bootstrap 4 Disable Responsive Navbar

You can also use the flexbox utilities to prevent the vertical navbar on smaller screens. The flex-nowrap flex-row allow the navbar to remain horizontal at all widths...

<nav class="navbar navbar-light bg-faded justify-content-between flex-nowrap flex-row">
    <a href="/" class="navbar-brand">PIM</a>
    <ul class="nav navbar-nav flex-row">
        <li class="nav-item"><a class="nav-link pr-3" href="/login">Login</a></li>
        <li class="nav-item"><a class="nav-link" href="/signup">Sign up</a></li>
    </ul>
</nav>

How it works:

navbar-expand -- always horizontal, non collapsing
navbar-expand-xl -- collapses into mobile < 1200px
navbar-expand-lg -- collapses into mobile < 992px
navbar-expand-md -- collapses into mobile < 768px
navbar-expand-sm -- collapses into mobile < 576px

no navbar-expand -- always mobile,collapsed (default)

http://codeply.com/go/z9VJTOBuaS

这篇关于在 Bootstrap 中禁用响应式(移动)导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！