Jquery 自举3'；s拆分按钮插入符号高度小于主按钮

我正在使用以下代码：

<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

，而不是应用默认的

34px

。我想知道为什么？

检查它的css属性，它的

高度

设置为

自动

。我想它是灰色的，所以我找不到它的位置

因此，我通过以下方式强制一处房产：

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

---

这是一个常见的问题，我想与大家分享我的想法，因为我也遇到了这个问题，简单的解决方案是更改html页面的doctype定义。无需添加任何其他css属性。只需检查doctype定义。 应该是

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

---

请参阅

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

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

切换下拉列表

---

似乎很好，无法重现您的问题，请告诉我们您是什么浏览器using@Phoenix它位于谷歌Chrome44.0.2403.89M（64位）上。查看我的编辑…@Gideon我无法在同一浏览器上解决您的问题注意按钮组和Chrome浏览器中的Glyph图标存在一些错误！非常感谢这一点-我刚刚花了相当多的时间将此按钮的代码向下拉，以解决此问题。谁会想到这是一个doctype错误！

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