Bootstrap 4 在容器中禁用导航栏折叠 [英] Bootstrap 4 disable navbar-collapse in container

问题描述

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

我已经尝试过这个但应该没有换行符.

如果在导航栏中登录左对齐并且注册右对齐也很好.

解决方案

只需使用 navbar-toggleable-xl..

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

<nav class="navbar navbar-toggleable-xl navbar-inverse bg-primary"><div class="容器"><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 class="nav-item"><a class="nav-link" href="#">Link</a><li class="nav-item"><a class="nav-link" href="#">Link</a>

</nav>

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

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

<nav class="navbar navbar-light bg-faded justify-content-between flex-nowrap flex-row"><div class="容器"><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="">登录</a></li><li class="nav-item"><a class="nav-link" href="">注册</a></li>

</nav>

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

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.

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

But thats not working.

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

That looks like:

but there should be no Line break.

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

解决方案

Just use navbar-toggleable-xl..

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

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 在容器中禁用导航栏折叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！