无法使Bootstrap列表项内容正确对齐

Question

我正在尝试使用包含标签，按钮和切换的项目创建列表。我不能让div垂直对齐，因为它们的高度不同。

代码如下所示：

<li class="list-group-item form-inline">
    <div class="row ">
        <div class="col-md-8">
            <h3>Pin:</h3>
        </div>
        <div class="col-md-4">
            <input type="checkbox" checked data-toggle="toggle" data-size="small">
            <button type="button" class="btn btn-default btn-sm">Remove</button>
        </div>
    </div>
</li>

，结果如下：

BOOTPLY DEMO

谢谢！

Answer 1

我认为问题在于您的标签是h3元素，其高度比切换和按钮高。一种解决方案是将控件包装在div.h3中：

<div class="row ">
  <div class="col-md-8">
    <h3>Pin:</h3>
  </div>
  <div class="col-md-4">
    <div class="h3">
      <input checked="" data-toggle="toggle" data-size="small" type="checkbox">
      <button type="button" class="btn btn-default btn-sm">Remove</button>
    </div>
  </div>
</div>

Bootply

请注意，就布局而言，使用<h3>而不是<div class="h3">会起作用，但这在语义上是不正确的，因为按钮不是标题。

Answer 2

我想，你想看到这个结果。您可以将line-height添加到您的班级并解决它。

HERE IS DEMO

更新： 对于可更改的字体大小，您可以使用此示例。

<强> DEMO