twitter-bootstrap 在引导程序 4 中禁用响应式导航栏

Disable responsive navbar in bootstrap 4

提问by user2116499

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.

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

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.

首先十分感谢。

回答by Zim

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

最简单的方法是使用类（现在在Bootstrap 4 中），以便菜单在所有宽度上都是非移动（水平）的。navbar-toggleable-xlnavbar-expand

<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

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

You can also use the flexboxutilities to prevent the vertical navbar on smaller screens. The flex-nowrap flex-rowallow the navbar to remain horizontal at all widths...

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

<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

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

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

否navbar-expand- 始终移动，折叠（默认）

http://www.codeply.com/go/z9VJTOBuaS

http://www.codeply.com/go/z9VJTOBuaS

回答by Amir5000

I'd suggest using just a nav, but if you need the styling of the navbar you can get around it by adding the helper classes and removing some to get it to function as you want. This should display the link items on mobile without the toggle button dropdown functionality.

我建议只使用导航，但如果您需要导航栏的样式，您可以通过添加辅助类并删除一些来解决它，以使其按需要运行。这应该在没有切换按钮下拉功能的情况下在移动设备上显示链接项目。

<nav class="navbar navbar-fixed-top navbar-toggleable-sm navbar-light bg-faded"> <a href="/" class="navbar-brand">PIM</a> <div id="navbarNav" class="navbar-collapse"> <ul class="navbar-nav"> <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> </div> </nav>

<nav class="navbar navbar-fixed-top navbar-toggleable-sm navbar-light bg-faded"> <a href="/" class="navbar-brand">PIM</a> <div id="navbarNav" class="navbar-collapse"> <ul class="navbar-nav"> <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> </div> </nav>

JSFIDDLEfor reference.

JSFIDDLE供参考。