Bootstrap 4禁用容器中的导航栏折叠

问题描述

我想在Bootstrap 4中禁用导航栏折叠.如果导航栏占据整个宽度，但是容器类只允许使用默认宽度放置内容，那会很好.

Hi I want to disable the navbar collapse in Bootstrap 4. And it would be nice if the navbar takes the whole width but inside the navbar the container class only allows the default width to place content.

我已经尝试过在引导程序4中禁用响应式导航栏，但是不能在其中使用容器.

I've tried this Disable responsive navbar in bootstrap 4 but thats not working with the container in it.

但这没用.

<nav class="navbar navbar-light bg-faded justify-content-between flex-nowrap flex-row">
  <div class="container">
    <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="">Sign up</a></li>
    </ul>
  </div>
</nav>

看起来像:

但不应有换行符.

如果导航栏的登录名左对齐，而注册的右对齐，那也很好.

It would also be nice if the Login would be left aligned and the Sign Up would be right aligned in the navbar.

推荐答案

只需使用navbar-toggleable-xl ..

编辑-Bootstrap 4 beta现在为navbar-expand

Edit - Bootstrap 4 beta is now navbar-expand

<nav class="navbar navbar-toggleable-xl navbar-inverse bg-primary">
    <div class="container">
        <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>
    </div>
</nav>

http://www.codeply.com/go/8FF7HX22L3

或者，也可以使用flexbox实用程序类...

Alternately, it can be done using the flexbox utility classes...

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

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

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