引導程序導航欄下拉按鈕在最小視圖中失敗

我有一組Bootstrap（v3.3.4）按鈕，顯示在NavBar中的管理員。它們出現並切換到最佳狀態接受最小的視圖。從最小的角度來看，他們不再下拉。引導程序導航欄下拉按鈕在最小視圖中失敗

的HTML看起來像這樣：

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
    <ul class="nav navbar-nav navbar-right"> 
     <li class="hidden"> 
      <a class="page-scroll" href="#page-top"></a> 
     </li> 
     <li> 
      <a class="page-scroll" href="@Url.MyMvcRoute">Home</a> 
     </li> 
     @if (User.Identity.IsAuthenticated) 
     { 
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Admin<span class="caret"></span></a> 
       <ul class="dropdown-menu" role="menu"> 
        <li><a href="@Url.MyMvcRoute">Orders</a></li> 
        <li class="divider"></li> 
        <li><a href="@Url.MyMvcRoute">Tour Categories</a></li> 
        <li><a href="@Url.MyMvcRoute">Tours</a></li> 
       </ul> 
      </li> 
     } 
    </ul> 
</div>

enter image description here

來源

2015-07-11 Prisoner ZERO

因爲我測試了這個沒有問題你應該張貼你的代碼的其餘部分。 – vanburen

囚徒ZERO，您好。看看這個代碼，我用你的管理導航下拉代碼，正如你可以看到這個工作正常在這個設置。

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    
 
    <meta name="description" content=""> 
 
    <meta name="author" content=""> 
 
    <link rel="icon" href="../../favicon.ico"> 
 

 
    <title>Bootstrap Navbar Pull-Down Button fails in smallest view</title> 
 

 
    <!-- Bootstrap core CSS --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 
 
<style> 
 
body { 
 
    padding-top: 50px; 
 
} 
 
.spacer { 
 
    margin-top: 2%; 
 
    margin-bottom: 2%; 
 
}  
 
.block { 
 
    height: 400px; 
 
    background-color: darkorange; 
 
} 
 
</style> 
 

 
</head> 
 

 
<body> 
 

 
    
 
<nav class="navbar navbar-inverse navbar-fixed-top "> 
 
     <div class="container"> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
 
      <span class="sr-only">Toggle navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      </button> 
 
      <a class="navbar-brand " href="#">Project name</a> 
 
     </div> 
 
     <div id="navbar" class="collapse navbar-collapse"> 
 
      <ul class="nav navbar-nav navbar-right"> 
 
      <li class="active"><a href="#">Home</a></li> 
 
      <li><a href="#about">About</a></li> 
 
      <li><a href="#contact">Contact</a></li> 
 
      <!-- @if (User.Identity.IsAuthenticated) 
 
     { --> 
 
       <li class="dropdown"> 
 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Admin<span class="caret"></span></a> 
 
       <ul class="dropdown-menu" role="menu"> 
 
        <li><a href="@Url.MyMvcRoute">Orders</a></li> 
 
        <li class="divider"></li> 
 
        <li><a href="@Url.MyMvcRoute">Tour Categories</a></li> 
 
        <li><a href="@Url.MyMvcRoute">Tours</a></li> 
 
       </ul> 
 
      </li> 
 
      <!-- } --> 
 
      </ul> 
 
     </div><!--/.nav-collapse --> 
 
     </div> 
 
    </nav> 
 
    
 
<div class="container col-lg-12 spacer"></div> 
 
    
 
<div class="container col-lg-12"> 
 

 
    <div class="col-xs-10 col-xs-offset-1 block"> 
 
       
 
    </div> 
 
      
 
</div><!-- /.container --> 
 

 
    <!-- Bootstrap core JavaScript --> 
 
    <!-- Placed at the end of the document so the pages load faster --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
    
 

 
    
 
</body> 
 
</html>

來源

2015-07-12 00:05:49 AngularJR

引導程序導航欄下拉按鈕在最小視圖中失敗

回答

相關問題