2017-07-17 93 views
0

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

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

<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

回答

1

您正在使用引導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> 
+0

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

0

你需要顯示在中等和大屏幕的.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

+0

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

+0

查看更新的OP請 – terryeah