Question

我有2个导航栏的页面。第一个是navbar-inverse，第二个是一个稍微定制的导航栏，名为navbar-app（基本上只是一个颜色变化）。

一切正常，除了navbar-app的汉堡包没有显示，但是当你点击汉堡包应该在哪里时仍然有效。请帮忙。： - ）

这是页面的html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home Page</title>
    <link href="/AppTemplate/InsideWeb/Content/bootstrap.css" rel="stylesheet"/>
<link href="/AppTemplate/InsideWeb/Content/site.css" rel="stylesheet"/>

    <script src="/AppTemplate/InsideWeb/Scripts/modernizr-2.8.3.js"></script>

</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Brand Link</a>
            </div>
            <div class="navbar-collapse collapse" id="main-navbar-collapse">
                <ul class="nav navbar-nav">
                    <li><a href="#">News</a></li>
                    <li><a href="#">Forms</a></li>
                    <li><a href="#">Departments&nbsp;&amp;&nbsp;Divisions</a></li>
                    <li><a href="#">Employee&nbsp;Center</a></li>
                </ul>

            </div>
        </div>
    </div>
    <div class="container body-content">

        <nav class="navbar navbar-app">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#app-navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="/AppTemplate/InsideWeb/">AppTemplate</a>
                </div>
                <div class="navbar-collapse collapse" id="app-navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="#">Link</a></li>
                        <li><a href="#">Link</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Administration <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Manage App</a></li>
                                <li><a href="/AppTemplate/InsideWeb/AppUsers">Manage Users</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">One more separated link</a></li>
                            </ul>
                        </li>
                    </ul>


                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>

    <div class="row">
        <div class="col-md-12">
            content here
        </div>
    </div>

    </div>

    <footer id="footer">
        footer here
    </footer>

    <script src="/AppTemplate/InsideWeb/Scripts/jquery-1.12.3.js"></script>

    <script src="/AppTemplate/InsideWeb/Scripts/bootstrap.js"></script>
    <script src="/AppTemplate/InsideWeb/Scripts/respond.js"></script>
</body>
</html>

这是navbar-app的css：

.navbar-app {
    background-color:#0071b9;
    color:#ffffff;
    border-radius:2px;
    margin-top:60px;
}

.navbar-app .navbar-nav > li > a {
    color:#fff;
}

.navbar-app .navbar-nav > li > a:hover, .navbar-app .navbar-nav > li > a:active {
    color:black;
}

.navbar-app .navbar-nav > .active > a, .navbar-nav > .active > a:hover, .navbar-nav > .active > a:focus {
    color: #ffffff;
    background-color:transparent;
}
.navbar-app .navbar-brand {
    color:#ffffff;
}

.dropdown-toggle:active, .open .dropdown-toggle {background:#FFF !important; color:#000 !important;}

Answer 1

原来我的自定义导航栏的实现还没有完成。我错过了以下css：

.navbar-app .navbar-toggle .icon-bar {
  background-color: #ffffff;
}

.navbar-app .navbar-toggle {
  border-color: #ddd;
}

.navbar-app .navbar-toggle:hover,
.navbar-app .navbar-toggle:focus {
    background-color: #1085e6;
    border-color: #1085e6;
}

Answer 2

嗨，这里是你必须最小化手机屏幕的代码，然后你检查

    <!DOCTYPE html>
<html>
<head>
   <title>Try v1.2 Bootstrap Online</title>
   <link href="http://www.tutorialspoint.com//bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://www.tutorialspoint.com//scripts/jquery.min.js"></script>
   <script src="http://www.tutorialspoint.com//bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<nav class = "navbar navbar-default" role = "navigation">

   <div class = "navbar-header">
      <button type = "button" class = "navbar-toggle" 
         data-toggle = "collapse" data-target = "#example-navbar-collapse">
         <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 = "#">TutorialsPoint</a>
   </div>

   <div class = "collapse navbar-collapse" id = "example-navbar-collapse">

      <ul class = "nav navbar-nav">
         <li class = "active"><a href = "#">iOS</a></li>
         <li><a href = "#">SVN</a></li>

         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
               Java 
               <b class = "caret"></b>
            </a>

            <ul class = "dropdown-menu">
               <li><a href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>

               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>

               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>

         </li>

      </ul>
   </div>

</nav>

</body>
</html>

你可以看到汉堡包

页面上有2个引导程序导航栏 - 一切正常但第二个汉堡包没有显示

2 个答案: