我想在按钮组内的 Bootstrap 下拉按钮的右侧显示插入符号。
我的代码是(另请参阅 this fiddle ):
<div class="span3 well">
<div class="btn-group btn-block">
<a class="btn btn-primary dropdown-toggle btn-block" data-toggle="dropdown" href="#">
New … <i class="caret pull-right"></i>
</a>
<ul class="dropdown-menu">
<li>1</li>
<li>2</li>
</ul>
</div>
</div>
和
.btn-group .dropdown-toggle {
padding-left: 10px;
padding-right: 10px;
}
在 webkit(Safari 和 Chrome)中,它看起来符合预期:
但是 Firefox 不起作用:
我在这里犯了一个错误吗?哪种行为是正确的?我应该怎么做才能使其在任何地方都有效?
最佳答案
btn-group
导致了问题:
.btn-block .dropdown-toggle {
padding-left: 10px;
padding-right: 10px;
}
<div class="span3 well">
<div class="btn-block"> <!-- <<< Right here is where I removed btn-group -->
<a class="btn btn-primary dropdown-toggle btn-block" data-toggle="dropdown" href="#">
New … <i class="caret pull-right"></i>
</a>
<ul class="dropdown-menu">
<li>1</li>
<li>2</li>
</ul>
</div>
</div>
http://jsfiddle.net/userdude/KdUdS/12/
它在 Chrome 中的外观与在 Firefox 中的外观相同。
编辑
问题是这样的:
.btn-group {
font-size: 0;
position: relative;
vertical-align: middle;
white-space: nowrap; // <<< This here
}
那就是line 3438 of bootstrap.css
。我用以下方法修复了它:
<div class="btn-block btn-group" style="white-space: normal;">
http://jsfiddle.net/userdude/KdUdS/14/
现在下拉元素看起来不太热门,但我想您知道这将解决这个问题。
关于html - Bootstrap 下拉菜单插入符号在 Firefox 中不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12657520/