我必须更改我的Bootstrap导航栏，以便右侧的下拉列表在较小的屏幕上和在较大的屏幕上一样起作用：
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SHOWCASE: Bootstrap Navbar</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
.pagecontent {
margin: 0 18px;
}
/* bootstrap override */
.container {
width: 100%;
padding: 0;
}
.navbar {
border-radius: 0px;
}
.container a {
color: yellow;
}
.navbar-text {
float: left !important;
margin-right: 10px;
}
.navbar-right {
float: right!important;
}
</style>
</head>
<body>
<div class="container">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header pull-left">
<a class="navbar-brand" href="#">Company Name</a>
</div>
<ul class="nav navbar-nav visible-sm-block visible-md-block visible-lg-block">
<li class="active"><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown pull-right">
<a href="#" data-toggle="dropdown" class="dropdown-toggle"><span class="glyphicon glyphicon-menu-hamburger"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li class="divider"></li>
<li><a href="#">Menu A</a></li>
<li><a href="#">Menu B</a></li>
<li><a href="#">Menu C</a></li>
</ul>
</li>
<li class="dropdown pull-right">
<a href="#" data-toggle="dropdown" class="dropdown-toggle"><span class="glyphicon glyphicon-cog"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Settings 1</a></li>
<li><a href="#">Settings 2</a></li>
<li><a href="#">Settings 3</a></li>
<li class="divider"></li>
<li><a href="#">Settings A</a></li>
<li><a href="#">Settings B</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<div class="pagecontent">
<p class="visible-xs-block">seen on xs screens.</p>
<p class="visible-sm-block">seen on sm screens.</p>
<p class="visible-md-block">seen on md screens.</p>
<p class="visible-lg-block">seen on lg screens.</p>
</div>
</div>
</body>
</html>
Dasith解决方案的问题：
解决方法是简单地添加背景色：
.navbar-nav .open .dropdown-menu {
background-color: #fff;
Dasith解决方案的问题2：
最佳答案
通过chrome开发工具进行的快速检查使我得以解决此问题：
@media (max-width: 767px){
.navbar-nav .open .dropdown-menu {
border: 1px solid rgba(0,0,0,.15);
position:absolute;
box-shadow: 0 6px 12px rgba(0,0,0,.175);
}
.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:focus, .navbar-inverse .navbar-nav .open .dropdown-menu>li>a:hover {
color: #000;
}
}
这是经过调整的版本，上面进行了修改，以更好地了解其效果
here..