Checkbox Label overlapping the checkbox - Bootstrap3

问题

I am using bootstrap 3 & the issue is that label for the checkbox is overlapping the text. I have tried a few thing things but did not work, so if someone can help I will really appreciate it. This is what the code looks like, The class of the form is 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>

回答1:

It's supposed to be like this with Bootstrap, <input> first and text after. 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>

You can follow other answers if you do need the checkbox appears at the end.

回答2:

In Bootstrap the styles expect thecheckbox to be first and then the text and hence a margin-left: -20px is set. For you snippet you need to add custom styles.

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

Try use display: inline-block for .checkbox class, its should to help. Or change position via margin margin-left: 20px;

来源：https://stackoverflow.com/questions/28745605/checkbox-label-overlapping-the-checkbox-bootstrap3