在多个列的引导程序中对齐按钮组和文本

Question

我有一个看似简单的问题，我可以用一点CSS修复，但我想知道是否有人知道在Bootstrap中布置带有文本的列的正确方法，然后是一个带有按钮的列，并且让它们垂直对齐。

以下是代码：

<div class="row">
<div class="col-xs-8">Looking for something specifc? Have you tried looking through the <a href="#">Topic Index</a>?</div>
<div class="col-xs-4">
  <div class="dropdown dropup pull-right">
  View articles by
    <button class="btn btn-default dropdown-toggle" type="button" id="dd-TopicIndex" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
      Category
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu1">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </div>
</div>

这就是它产生的东西：

您看到的问题是右侧的文字与按钮对齐，但左侧的文字不是。

感谢您的帮助。 d

Answer 1

实际上btn类添加了一些填充：

btn {
  display: inline-block;
  padding: 6px 12px;
  ...
}

该文本属于同一个div，所以它以某种方式继承了这个填充。因此，如果您希望左侧的文本对齐，您可能需要添加填充顶部，这当然不是最佳解决方案。