Bootstrap 4 vô hiệu hóa navbar-sụp đổ trong container

Question

Hi Tôi muốn vô hiệu hóa sự sụp đổ Navbar trong Bootstrap 4. Và nó sẽ được tốt đẹp nếu navbar taktes chiều rộng lỗ nhưng bên trong navbar lớp container chỉ cho phép chiều rộng mặc định để đặt nội dung .

Tôi đã thử điều này Disable responsive navbar in bootstrap 4 nhưng điều đó không hoạt động với vùng chứa trong đó.

Nhưng thats không làm việc

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

trông giống như

nhưng không nên có nghỉ Line.

Nó cũng sẽ được tốt đẹp đó đăng nhập sẽ bị bỏ lại giao và Đăng ký sẽ được quyền giao trong Navbar

Answer 1

Chỉ cần sử dụng navbar-toggleable-xl ..

Sửa - Bootstrap 4 beta tại là 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

Cách khác, nó có thể được thực hiện bằng cách sử dụng các lớp tiện ích 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> 

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

Answer 2

Đối với phiên bản bootstrap 4 beta

chỉ cần thêm 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>