当内联复选框或radiobox前面有文本时，行高问题

Question

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

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

有没有办法让复选框与周围环境真正内联？

Answer 1

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

让我们看一下2153行的Bootstrap.css：

.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>