twitter-bootstrap - 内联复选框或单选框以文本开头时的行高问题

Question

使用 Bootstrap 3，我正在尝试在句子中间创建一个带有复选框的表单。我假设我应该使用Inline Checkboxes，但它对我的行高执行以下操作：

示例代码位于http://www.bootply.com/92125。

有没有办法让复选框真正与周围环境保持一致？

Answer 1

我已经在 Bootply 上重新检查了您的代码。使用类时出现问题form-horizontal。我不知道你为什么需要使用它，你可能有一些原因。

让我们看一下Bootstrap.css2153行：

.form-horizontal .control-label,
.form-horizontal .radio,
.form-horizontal .checkbox,
.form-horizontal .radio-inline,
.form-horizontal .checkbox-inline {
  padding-top: 7px;
  margin-top: 0;
  margin-bottom: 0;
}

你可以看到有padding-top: 7px. 这会将您的复选框向下推7px。

---

为了解决这个问题，你有两个选择。

1. form-horizontal如果您不需要，请删除该课程。
2. 创建一个新类并设置padding-top: 0：

你的 CSS 文件：

.foo{
  padding-top: 0 !important;
}

您的 HTML 文件：

<label class="checkbox-inline foo"><input type="checkbox" value="Adopted" id="family-adopted">please check this box.</label>