css – Twitter Bootstrap – 内联复选框对齐问题

让自己疯狂试图想出这一个。我似乎不能得到复选框包装到下一行左对齐正确。

以下是一些示例代码：

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

这里的结果：

有任何想法吗？

解决方法

你可以通过添加一个no_indent类(或任何)覆盖Bootstrap类：

<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，复选框内联类已经缩减为一个复选框内联类。 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;
}

原文链接：https://www.f2er.com/css/220311.html

css – Twitter Bootstrap – 内联复选框对齐问题

解决方法

猜你在找的CSS相关文章