Question

我正在使用Bootstrap 3's button with attached drop-up menu使用此代码：

OK

但插入符号比左键更小。

Remittance Summary.png http://derp.co.uk/3576a

但是，包含带有的文本显然可以解决问题：

Remittance Summary.fixed.png http://derp.co.uk/5d282

我想知道为什么插入符号与左键不同？没有加载<div class="btn-group dropup"> <button type="button" class="btn btn-primary">Save</button> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu"> <li><a href="#">Remittance Summary</a></li> <li role="separator" class="divider"></li> <li><a href="#">Close Advice</a></li> </ul> </div>覆盖引导程序。如果有帮助的话，这个按钮组可以在模态页脚中找到。

我发现了问题：浏览器将.css应用于插入符号按钮的auto，而不是应用默认的height。我想知道为什么？

Answer 1

这是一个常见的问题，我想分享我的想法，因为我也遇到了这个问题，简单的解决方案是改变你的html页面的doctype定义。不需要添加任何其他的css propoerties.Just检查你的doctype定义。它应该是

<!DOCTYPE html>

.Bootstrap在HTML5及以上版本中运行良好....

参考Bootstrap Documenation

Answer 2

如果你在按钮中使用输入复选框但我也找到了一个修复：

，这仍然是一个问题

<div class="btn-group dropup">
<button type="button" class="btn btn-primary"><input type="checkbox"/></button>
<button type="button" class="btn btn-primary dropdown-toggle"
    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
    <li><a href="#">Remittance Summary</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Close Advice</a></li>
</ul>

Demo fiddle here

Fixed Demo fiddle here

Answer 3

检查它的css属性，其height设置为auto。它是灰色的，所以我无法追踪它的位置。

chrome-css.png http://derp.co.uk/6d6ba

所以我通过以下方式强迫财产：

button.btn.dropdown-toggle {
    height: 34px !important;
}

Bootstrap 3的分割按钮插入符号高度小于主按钮

3 个答案: