2017-08-14 27 views
9

Tôi đang cố di chuyển từ Bootstrap 3.x đến 4 và tôi đang gặp sự cố với thanh điều hướng mới. Không có vấn đề gì tùy chọn cho navbar-toggleable-x tôi chọn, navbar luôn luôn hiển thị nút bánh hamburger, giống như nó bị sụp đổ.Bootstrap 4 navbar toggleable

Tài liệu HTML này thể hiện sự cố của tôi. Tôi đã nhận nó trên trang tài liệu chính thức.

<html> 
<head> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> 
</head> 
<body> 
<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> 
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon"></span> 
    </button> 
    <a class="navbar-brand" href="#">Navbar</a> 
    <div class="collapse navbar-collapse" id="navbarNavDropdown"> 
    <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 dropdown"> 
     <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
      Dropdown link 
     </a> 
     <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> 
      <a class="dropdown-item" href="#">Action</a> 
      <a class="dropdown-item" href="#">Another action</a> 
      <a class="dropdown-item" href="#">Something else here</a> 
     </div> 
     </li> 
    </ul> 
    </div> 
</nav> 
</body> 
</html> 
+0

Popped của bạn '

Trả lời

11

Tính đến Bootstrap 4 beta, toggleable đã được thay thế bằng expand.

Bây giờ đó là "mở rộng" breakpoint, và không phải là "chuyển đổi" breakpoint, những thay đổi logic phù hợp để navbar-toggleable-md mà ngày nay được navbar-expand-lg ..

https://www.codeply.com/go/Io0duaPkqz

<nav class="navbar navbar-expand-lg navbar-light bg-faded"> 
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon"></span> 
    </button> 
    <a class="navbar-brand" href="#">Navbar</a> 
    <div class="collapse navbar-collapse" id="navbarNavDropdown"> 
    <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 dropdown"> 
     <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
      Dropdown link 
     </a> 
     <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> 
      <a class="dropdown-item" href="#">Action</a> 
      <a class="dropdown-item" href="#">Another action</a> 
      <a class="dropdown-item" href="#">Something else here</a> 
     </div> 
     </li> 
    </ul> 
    </div> 
</nav> 

https://www.codeply.com/go/Io0duaPkqz

Cần có một lớp navbar-expand* nếu bạn muốn thanh điều hướng mở rộng theo chiều ngang, nếu không thanh điều hướng mặc định là phiên bản thu gọn theo chiều dọc, di động.

Thông tin thêm về Bootstrap 4 changes from alpha 6 to beta

+0

Dường như hiện đang hoạt động. Cảm ơn. – wajsic

Các vấn đề liên quan