在Bootstrap 4中禁用响应式导航栏 [英] Disable responsive navbar in bootstrap 4

问题描述

是否有一种方法可以在引导程序4中禁用响应式navBar?我不希望出现下拉菜单，因为在移动版本中，仍然可以看到品牌旁边的2个链接.另外，我想知道是否可以在栏中将链接放到右边. Pull-xs-right似乎无法正常工作.

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.

我当前的代码如下:

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

非常感谢.

推荐答案

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

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>

演示: Bootstrap 4禁用自适应导航栏

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

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>

工作方式:

navbar-expand-始终水平，不塌陷
navbar-expand-xl-崩溃为手机< 1200px
navbar-expand-lg-崩溃为手机< 992px
navbar-expand-md-崩溃成手机< 768px
navbar-expand-sm-崩溃为手机< 576px

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-始终移动，折叠(默认)

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

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

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