1
我试图在自举导航栏中使用navbar-btn，但是使它们恢复为移动视图上的正常链接。切换移动菜单上的自举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;}
我也曾尝试可见-XS-inline-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。
关于如何在折叠的所有链接上添加填充的任何想法？
“所有链接”是什么意思？我怀疑你只是想添加填充（并且看起来像只是“左填充”）到2个链接的“登录”和“我的模板”。 – Hopeless