jquery - 无法使 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">就布局而言，这会工作得很好，但这在语义上是不正确的，因为按钮不是标题。