我无法使用Bootstrap使我的导航栏响应。我没有隐藏子菜单列表，而是希望显示并使其响应。我刚刚借用了谷歌的徽标，因为我的徽标尺寸与它相同。一旦我缩小它，它就没有响应。我正在使用navbar-header，nav等类引导程序，但它不起作用。请参阅下面的代码以供审核。
ul.nav ul{
padding-left: 0;
margin-top: 10px;
}
ul.nav li{
list-style: none;
}
.menu-header{
border-bottom: solid 1px #000;
padding-bottom: 3px;
} <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="navbar navbar-default" style="margin-bottom: 0;">
<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="#">
<img class="" src="https://www.google.com.ph/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png">
</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li class="">
<a href="#">
</a>
</li>
<li class="">
<div class="">
<div class="menu-header">MENU1</div>
<ul>
<li>
<a href="#">Sub1 of MENU1</a>
</li>
<li>
<a href="#">Sub2 of MENU1</a>
</li>
</ul>
</div>
</li>
<li class="">
<div class="">
<div class="menu-header">MENU2</div>
<ul>
<li>
<a href="#">Sub1 of MENU2</a>
</li>
<li>
<a href="#">Sub2 of MENU2</a>
</li>
<li>
<a href="#">Sub3 of MENU2</a>
</li>
<li>
<a href="#">Sub4 of MENU2</a>
</li>
<li>
<a href="#">Sub5 of MENU2</a>
</li>
</ul>
</div>
</li>
<li class="">
<div class="">
<div class="menu-header">MENU3</div>
<ul>
<li>
<a href="#">Sub1 of MENU3</a>
</li>
<li>
<a href="#">Sub2 of MENU3</a>
</li>
<li>
<a href="#">Sub3 of MENU3</a>
</li>
</ul>
</div>
</li>
<li class="">
<div class="">
<div class="menu-header">MENU4</div>
<ul>
<li>
<a href="#">Sub1 of MENU4</a>
</li>
<li>
<a href="#">Sub2 of MENU4</a>
</li>
<li>
<a href="#">Sub3 of MENU4</a>
</li>
</ul>
</div>
</li>
</ul>
<div class="clearfix"></div>
<div class="pull-right">
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle dropdown-login-btn" data-toggle="dropdown" aria-expanded="false">
☻ Log In <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
here
</li>
</ul>
</div>
<a class="btn btn-primary reg" href="#">◘ Register</a>
</div>
</div> <!-- End of Container -->
<div class="fgol-header-line"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
答案 0 :(得分：0)
如果你在图像中显示它应该是什么样子会很有帮助。
我想出你想要实现的目标：
ul.nav ul{
padding-left: 0;
margin-top: 10px;
}
ul.nav li{
list-style: none;
}
.menu-header{
border-bottom: solid 1px #000;
padding-bottom: 3px;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="navbar navbar-default" style="margin-bottom: 0;">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mainSubNav" 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="#">
<img class="" src="https://www.google.com.ph/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png">
</a>
</div>
<div class="collapse navbar-collapse" id="mainSubNav">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">MENU1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
<a href="#">Sub1 of MENU1</a>
</li>
<li>
<a href="#">Sub2 of MENU1</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">MENU2 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
<a href="#">Sub1 of MENU2</a>
</li>
<li>
<a href="#">Sub2 of MENU2</a>
</li>
<li>
<a href="#">Sub3 of MENU2</a>
</li>
<li>
<a href="#">Sub4 of MENU2</a>
</li>
<li>
<a href="#">Sub5 of MENU2</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">MENU3 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
<a href="#">Sub1 of MENU3</a>
</li>
<li>
<a href="#">Sub2 of MENU3</a>
</li>
<li>
<a href="#">Sub3 of MENU3</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">MENU4 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
<a href="#">Sub1 of MENU4</a>
</li>
<li>
<a href="#">Sub2 of MENU4</a>
</li>
<li>
<a href="#">Sub3 of MENU4</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="clearfix"></div>
<div class="pull-right">
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle dropdown-login-btn" data-toggle="dropdown" aria-expanded="false">
☻ Log In <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
here
</li>
</ul>
</div>
<a class="btn btn-primary reg" href="#">◘ Register</a>
</div>
</div> <!-- End of Container -->
<div class="fgol-header-line"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
仅供参考，JsFiddle