Bootstrap 4 Disables Container Navigation Crash

Question

Hi, I want to disable Navbar crashes in Bootstrap 4. And it would be nice if navbar displays the width of the hole, but inside the navigation bar the container class allows the default width to be placed.

I tried this Disable sensitive navigation bar in bootstrap 4 , but this does not work with the container in it.

But it does not work

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

which looks like

but there should be no line break.

It would also be nice if the login was left assigned and the registration would be assigned in Navbar

Answer 1

Just use navbar-toggleable-xl ..

Change Now the beta version of 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

Alternatively, this 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

Answer 2

To download 4 beta

just add navbar-expand to <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>