复选框标签与复选框重叠 - Bootstrap3答案

【问题标题】：Checkbox Label overlapping the checkbox - Bootstrap3复选框标签与复选框重叠 - Bootstrap3
【发布时间】：2015-04-29 00:23:13
【问题描述】：

我正在使用引导程序 3，问题是复选框的标签与文本重叠。我尝试了一些事情但没有奏效，所以如果有人可以提供帮助，我将非常感激。代码是这样的，表单的类是form-horizontal

<div class="checkbox">
    <label class="checkbox-inline no_indent">I have read and agree with    privacy and disclosure policy.
    <input name="Terms" id="Terms" type="checkbox" ></label>
</div>

【问题讨论】：

标签： css twitter-bootstrap checkbox

【解决方案1】：

Bootstrap 应该是这样的，首先是<input>，然后是文本。 http://jsfiddle.net/sqax02ah/

<div class="checkbox">
    <label class="checkbox-inline no_indent">
        <input name="Terms" id="Terms" type="checkbox">
        I have read and agree with privacy and disclosure policy.
    </label>
</div>

如果您确实需要最后出现的复选框，您可以关注其他答案。

【讨论】：

这对我有用......谢谢......我如何为我当前的班级设置样式以应用此更改。我的项目中有很多输入元素，我只想更改应用并设置到整个项目中所有输入的当前类，我该如何实现它？

【解决方案2】：

在 Bootstrap 中，样式期望复选框首先出现，然后是文本，因此设置了 margin-left: -20px。对于您 sn-p，您需要添加自定义样式。

.radio input[type=radio], .radio-inline input[type=radio], .checkbox input[type=checkbox], .checkbox-inline input[type=checkbox] {
    margin-right: -20px;
    margin-left: 0;
}

Fiddle

【讨论】：

【解决方案3】：

尝试将display: inline-block 用于 .checkbox 类，它应该会有所帮助。或者通过marginmargin-left: 20px;改变仓位

【讨论】：