Twitter Bootstrap - 内联复选框对齐问题

Question

让自己疯狂试图弄清楚这个。我似乎无法将包裹到左下一行的复选框正确对齐。

以下是一些示例代码：

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

这是结果：

有什么想法吗？

Answer 1

您可以通过添加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;
}

Answer 2

这是一个完整的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;
}

Answer 3

在 @Override public int getItemCount() { return posts.size(); } public void setPosts(List<Categories> posts) { this.posts = posts; } public void clearData() { posts.clear(); } public void addAllData(List<Categories> posts) { this.posts.addAll(posts); } } 中包装每个标签+输入修复了边距左对齐问题，没有CSS覆盖/自定义

<li>

Answer 4

删除inline元素上的label班级。