我正在尝试在bootstrap navbar中使用navbar-btn，但使它们还原为移动视图上的普通链接。
我已经使用了可见的 - *类将按钮交换为"标准"导航项目，但是我无法正确格式化倒塌时的下拉菜单。这是我无法在可见XSdiv中的两个链接上工作的填充物，并假设这是造成问题的类。
我已经尝试了以下（以及我删除的许多其他）来格式化菜单，但是所有链接都没有任何作用：
.navbar-fixed-top > .navbar-collapse > .navbar-nav > li > a {padding: 10px 0;}
.navbar-collapse.collapse.in > ul > li > a {padding: 10px 0;}
我也尝试在链接中添加一类：
.navbar-collapse.collapsing > ul > li > a.toggled {padding: 10px 0;}
.navbar-collapse.collapse.in > ul > li > a.toggled {padding: 10px 0;}
我还尝试了可见的XS内线块和块，但这也没有区别
<div id="fixed-top" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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="#">logo</a>
</div>
<div class="collapse navbar-collapse">
<!-- buttons visible on full-size screen only -->
<div class="visible-lg visible-md">
<ul class="nav navbar-nav navbar-right">
<li>
<div class="btn-group">
<a class="toggled" href="#"><button type="button" class="btn navbar-btn nav-button active">login</button></a>
</div>
</li>
<li class="dropdown">
<button type="button" class="btn navbar-btn nav-button" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">my templates <span class="caret"></span></button>
<ul class="dropdown-menu inverse-dropdown">
<li><a class="toggled" href="#">template 1</a></li>
<li><a class="toggled" href="#">template 2</a></li>
<li><a class="toggled" href="#">template 3</a></li>
</ul>
</li>
</ul>
</div>
<ul class="nav navbar-nav">
<!-- non-button menu on small screen only -->
<div class="visible-sm visible-xs">
<li class="active"><a class="toggled" href="login.php">login</a></li>
<li class="dropdown">
<a class="toggled" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" href="#">my templates <span class="caret"></span>
</a>
<ul class="dropdown-menu inverse-dropdown">
<li><a class="toggled" href="#">template 1</a></li>
<li><a class="toggled" href="#">template 2</a></li>
<li><a class="toggled" href="#">template 3</a></li>
</ul>
</li>
</div>
<!-- visible on all sizes -->
<li><a class="toggled" href="index.php">home</a></li>
<li><a class="toggled" href="#">link 1</a></li>
<li><a class="toggled" href="#">link 2</a></li>
<li class="dropdown">
<a class="toggled" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" href="#">dropdown<span class="caret"></span>
</a>
<ul class="dropdown-menu inverse-dropdown">
<li><a class="toggled" href="#">link drop 1</a></li>
<li><a class="toggled" href="#">link drop 2</a></li>
</ul>
</li>
</ul>
</div>
</div>
我不会在这里发布CSS，但是我在这里都有：http：//www.bootply.com/c0gxvxtote#
也许有一种更简单的方法来实现我想要的东西。我更喜欢javascript。
关于如何在崩溃的所有链接中添加填充的任何想法？
尝试给元素一个 id，然后为它们样式。这比穿越Bootstrap CSS更方便。
#login-sm {
padding-left: 10px;
}
#dropdown-sm {
padding-left: 10px;
}<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
</style>
</head>
<body>
<div id="fixed-top" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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="#">logo</a>
</div>
<div class="collapse navbar-collapse">
<!-- buttons visible on full-size screen only -->
<div class="visible-lg visible-md">
<ul class="nav navbar-nav navbar-right">
<li>
<div class="btn-group">
<a class="toggled" href="#"><button type="button" class="btn navbar-btn nav-button active">login</button></a>
</div>
</li>
<li class="dropdown">
<button type="button" class="btn navbar-btn nav-button" data-toggle="dropdown" role="dropdown" aria-haspopup="true" aria-expanded="false">my templates <span class="caret"></span></button>
<ul class="dropdown-menu inverse-dropdown">
<li><a class="toggled" href="#">template 1</a></li>
<li><a class="toggled" href="#">template 2</a></li>
<li><a class="toggled" href="#">template 3</a></li>
</ul>
</li>
</ul>
</div>
<ul class="nav navbar-nav">
<!-- non-button menu on small screen only -->
<div class="visible-sm visible-xs">
<li id = "login-sm" class="active"><a class="toggled" href="login.php">login</a></li>
<li id = "dropdown-sm" class="dropdown">
<a class="toggled" data-toggle="dropdown" role="dropdown" aria-haspopup="true" aria-expanded="false" href="#">my templates <span class="caret"></span>
</a>
<ul class="dropdown-menu inverse-dropdown">
<li><a class="toggled" href="#">template 1</a></li>
<li><a class="toggled" href="#">template 2</a></li>
<li><a class="toggled" href="#">template 3</a></li>
</ul>
</li>
</div>
<!-- visible on all sizes -->
<li><a class="toggled" href="index.php">home</a></li>
<li><a class="toggled" href="#">link 1</a></li>
<li><a class="toggled" href="#">link 2</a></li>
<li class="dropdown">
<a class="toggled" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" href="#">dropdown<span class="caret"></span>
</a>
<ul class="dropdown-menu inverse-dropdown">
<li><a class="toggled" href="#">link drop 1</a></li>
<li><a class="toggled" href="#">link drop 2</a></li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>希望这会有所帮助！