28

把自己逼疯了，试图弄清楚这一点。我似乎无法让包裹到下一行的复选框正确左对齐。

这是一些示例代码：

<label class="checkbox inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> Aaaaaaaaaa
</label>
<label class="checkbox inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> Bbbbbbb
</label>
<label class="checkbox inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> Cccccccccccccc
</label>
<label class="checkbox inline">  
    <input type="checkbox" id="inlineCheckbox1" value="option1"> Ddddddddd
</label>
<label class="checkbox inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> Eeeeeeeee
</label>
<label class="checkbox inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> Ffffffffffff
</label>

结果如下：

在此处输入图像描述

有任何想法吗？

4

4 回答 4

49

您可以通过添加 no_indent 类（或其他）来覆盖 Bootstrap 2 类：

<label class="checkbox inline no_indent">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> Aaaaaaaaaa
</label>

并将其添加到您的 CSS 中：

.checkbox.inline.no_indent,
.checkbox.inline.no_indent+.checkbox.inline.no_indent {
  margin-left: 0;
  margin-right: 10px;
}
.checkbox.inline.no_indent:last-child {
  margin-right: 0;
}

Bootstrap 3：这些checkbox inline类已减少为一个checkbox-inline类。HTML 变为：

<label class="checkbox-inline no_indent">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> Aaaaaaaaaa
</label>

CSS：

.checkbox-inline.no_indent,
.checkbox-inline.no_indent+.checkbox-inline.no_indent {
  margin-left: 0;
  margin-right: 10px;
}
.checkbox-inline.no_indent:last-child {
  margin-right: 0;
}

Bootstrap 4：课程checkbox-inline现在是form-check-inline：

<label class="form-check-inline no_indent">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> Aaaaaaaaaa
</label>

CSS：

.form-check-inline.no_indent,
.form-check-inline.no_indent+.checkbox-inline.no_indent {
  margin-left: 0;
  margin-right: 10px;
}
.form-check-inline.no_indent:last-child {
  margin-right: 0;
}
于 2013-05-30T17:11:27.210 回答
12

这是一个完整的 Bootstrap 3 解决方案，它也解决了单选按钮的相同问题，而无需使用单独的类：

.checkbox-inline,
.checkbox-inline + .checkbox-inline,
.checkbox-inline + .radio-inline,
.radio-inline,
.radio-inline + .radio-inline,
.radio-inline + .checkbox-inline {
    margin-left: 0;
    margin-right: 10px;
}

.checkbox-inline:last-child,
.radio-inline:last-child {
    margin-right: 0;
}
于 2016-01-20T09:09:28.953 回答
-1

将每个标签+输入包装在一个中<li>修复了没有 CSS 覆盖/自定义的边距左对齐问题

<ul>
  <li>
    <label class="checkbox-inline">
      <input type="checkbox" value="option1"> Option 1
    </label>
  </li>

  <li>
    <label class="checkbox-inline">
      <input type="checkbox" value="option1"> Option 2
    </label>
  </li>
</ul>
于 2016-04-29T05:26:21.597 回答
-3

删除元素inline上的类。label

于 2013-10-22T10:42:35.647 回答