摺疊的導航欄只顯示在小屏幕上的引導

我想實現一個導航欄，在小設備上崩潰。這工作正常。摺疊的導航欄只顯示在小屏幕上的引導

但是，在中型和大型屏幕上，導航欄根本不顯示。我希望導航欄像中型和大型屏幕的普通導航欄一樣顯示，然後摺疊到小型設備的導航欄按鈕中。我正在關注引導程序模板，不知道爲什麼導航欄根本不顯示。

<body> 
<div class = "container"> 

<nav class="navbar navbar-default" > 


     <div class="navbar-header"> 
      <a class="navbar-brand" href="#"> 
       <img alt="logo" src="logo.png" width="250px;"> 
      </a> 


     <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#collapse-navbar" aria-expanded="false" aria-controls="navbar"> 
      &#9776; 
     </button> 
     </div> 


    <div class="navbar-collapse collapse" id="collapse-navbar">  
    <ul class="nav navbar-nav"> 
     <li class= "nav-item"><a class= "nav-link active" href="#">Home</a></li> 
     <li class= "nav-item"><a class= "nav-link" href="#">Build</a></li> 
     <li class= "nav-item"><a class= "nav-link" href="#">About</a></li> 
    </ul> 



    </div> 

</nav> 
</div>

這裏是一個代碼筆鏈接：https://codepen.io/gkunthara/pen/VWdrYj

來源

2017-07-17 brownmamba

您正在使用引導3標記並鏈接到引導4個CSS所鏈接的引導3的CSS和JavaScript像這樣：

<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

或者改變你的導航標記來引導4的標記像這樣：

<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> 
    <button class="navbar-toggler navbar-toggler-right" 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> 
    <a class="navbar-brand" href="#"> 
    <img alt="logo" src="logo.png" width="250px;"> 
    </a> 
    <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="#">Build</a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link" href="#">About</a> 
     </li> 
    </ul> 
    </div> 
</nav>

來源

2017-07-17 01:41:43

這個工程！不知道我是在一個不同的引導。謝謝！ – brownmamba

你需要顯示在中等和大屏幕的.navbar-header button。因此，改變

@media (min-width: 768px) 
{ 
    .navbar-toggle { 
     display: none; 
    } 
}

這

@media (min-width: 768px) 
{ 
    .navbar-toggle { 
     display: none; 
    } 

    .navbar-header button { 
     display: block; 
    } 
}

https://codepen.io/julysfx/pen/jwRYQB

來源

2017-07-17 00:25:00 terryeah

顯示所有屏幕的合攏導航欄。我只是想讓它出現一個正常的導航欄（固定在右邊），然後當它到達小屏幕顯示爲一個摺疊的導航欄 – brownmamba

查看更新的OP請 – terryeah

摺疊的導航欄只顯示在小屏幕上的引導

回答

相關問題