引导3的拆分按钮插入高度比主按钮小。

Question

我使用带附加下拉菜单的引导3的按钮使用以下代码：

<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>

但是插入符号比左边的按钮更小。

汇款http://derp.co.uk/3576a Summary.png

但是，包含带有插入符号的文本显然消除了以下问题：

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

我想知道为什么插入符号与左边按钮的高度不一样？没有一个加载的.css可以覆盖引导程序。如果这有帮助的话，这个按钮组可以在一个模态页脚上找到。

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

Answer 1

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

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

所以我通过：

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

Answer 2

这是一个常见的问题，我想分享我的想法，因为我也面临这个问题，而简单的解决方案是更改html page.No的文档类型，需要添加任何其他css propoerties.Just检查您的doctype定义。它应该是

.Bootstrap在HTML5及以上工作的很好.

参考引导文档化

Answer 3

如果在按钮中使用输入复选框，这仍然是一个问题，但我也找到了一个修复程序：

<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>

​

这里演示小提琴

修正了这里的演示小提琴