我正在尝试在引导程序导航栏中使用navbar-btn，但要让它们恢复到移动视图上的普通链接。
我已经使用visible- *类来替换“标准”导航项的按钮，但我无法在折叠时正确格式化下拉菜单。这是我无法在visible-xs div中的两个链接上工作的填充，并假设它是引起问题的类。
我尝试了以下（以及我删除的许多其他内容）来格式化菜单，但没有任何内容适用于所有链接：
.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;}
我也尝试过visible-xs-inline-block和block，但这没有任何区别
<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。
关于如何在崩溃时为所有链接添加填充的任何想法？
答案 0 :(得分：3)
尝试为元素添加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>
希望这有帮助！