Jquery Can'；无法使引导列表项内容垂直对齐

我正在尝试创建一个包含标签、按钮和切换的项目列表。我无法使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>

别针：
去除

结果如下所示：

及

---

谢谢

我认为问题在于您的标签是一个

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>

别针：
去除

---

请注意，就布局而言，使用

而不是

同样有效，但这在语义上是不正确的，因为按钮不是标题。

我想，您希望看到这个结果。您可以将

行高度

添加到类中并解决它

更新： 对于可变字体大小，可以使用此示例

---

请在中重新创建问题并将其添加到您的帖子中。完成，谢谢提示！你说的“垂直对齐”是什么意思。。。看起来它们的顶部对齐正确。我想对齐中间，这样所有元素都在同一个“轴”上。如果不能对齐中间浮动的列，则必须更改网格的工作方式，以显示：表格/表格单元格或内联块，这需要大量额外的css。第二列周围的.h3类是最好的解决方案，看起来不错，但我想知道是否有一个修复方法可以用于任何大小的文本。这是一个很好的答案。