twitter-bootstrap Bootstrap 4 在容器中禁用导航栏折叠
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42012446/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 4 disable navbar-collapse in container
提问by squadwuschel
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.
嗨，我想在 Bootstrap 4 中禁用导航栏折叠。如果导航栏占据整个宽度，但在导航栏中，容器类只允许默认宽度来放置内容，那就太好了。
I've tried this Disable responsive navbar in bootstrap 4but thats not working with the container in it.
我已经尝试过在 bootstrap 4 中禁用响应式导航栏，但这不适用于其中的容器。
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.
如果登录在导航栏中左对齐并且注册在右对齐也会很好。
回答by Zim
Just use navbar-toggleable-xl..
只需使用navbar-toggleable-xl..
Edit- Bootstrap 4 beta is now navbar-expand
编辑- Bootstrap 4 测试版现已发布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
http://www.codeply.com/go/8FF7HX22L3
Alternately, it can be done using the flexbox utility classes...
或者，它可以使用 flexbox 实用程序类来完成...
<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>
回答by Znaneswar
For bootstrap 4 beta version
对于 bootstrap 4 测试版
simply add navbar-expandto <nav>
简单地添加navbar-expand到<nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>