Question

我有一组Bootstrap（v3.3.4）按钮，显示给NavBar中的Adminsitrators。它们出现并切换为所有接受最小视图的伟大。在最小的视图中，它们不再下降。

HTML LOOKS LIKE：

<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

Answer 1

囚犯ZERO ，你好。看看这段代码，我使用了你的 admin 导航下拉代码，你可以看到这个设置正常。

＆＃13;

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

＆＃13;

Bootstrap Navbar下拉按钮在最小视图中失败

1 个答案: