Bootstrap 4 disable navbar-collapse in container

Question

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.

Answer 1

For bootstrap 4 beta version

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

Answer 2

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