Twitter bootstrap 引导：如何使下拉按钮看起来像其他文本并与其他文本对齐

我有以下HTML，它是一行菜单项的列表：

<ul>
    <li>Item 1</li>
    <li>
        <div class="btn-group">
          <a type="button" class="btn btn-default" data-toggle="dropdown">Item 2</a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action 1</a></li>
            <li><a href="#">Action 2</a></li>
          </ul>
        </div>
    </li>
    <li>
        Item 3
    </li>
<ul>

我可以看到按钮文本“项目2”与“项目1”或“项目3”没有垂直对齐。我怎样才能解决这个问题？此外，请随时让我知道上述.btn定制是否足够或正确

---

谢谢大家。

你们很接近了，但最后一部分不是关于

.btn

元素，而是包含元素，所以只需将其添加到CSS中：

.btn-group, .btn-group-vertical {
    position: relative;
    display: inline-block;
    vertical-align: text-bottom;
}

text-bottom

属性将按照元素的底端对齐所有

元素，为您提供完美的对齐方式

看

.btn-group, .btn-group-vertical {
    position: relative;
    display: inline-block;
    vertical-align: text-bottom;
}