custom-checkbox broken when not using label next to checkbox

[Gillardo]

When reporting a bug, include:

• Operating system and version (Windows)
• Browser and version (Chrome 52.0.2743.116 m (64-bit))

Code to reproduce, as you can see i am using a form, so no need to have a description

    <div class="row form-group">
        <label class="col-sm-2 col-form-label">Legend</label>
        <div class="col-sm-10 col-md-7">
            <label class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" />
                <span class="custom-control-indicator"></span>
            </label>
            <div class="text-muted">
                Display legend
            </div>
        </div>
    </div>

I have also tried adding a blank custom-control-description class to the html, so it looks like this, and again, still same line up issue

    <div class="row form-group">
        <label class="col-sm-2 col-form-label">Legend</label>
        <div class="col-sm-10 col-md-7">
            <label class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" />
                <span class="custom-control-indicator"></span>
                <span class="custom-control-description"></span>
            </label>
            <div class="text-muted">
                Display legend
            </div>
        </div>
    </div>

If however, i use custom-control-description and ever in a single character, it lines up fine, as you can see here

[tomlutzenberger]

Could be post it as a JSbin example?

[Gillardo]

jsbin supplied with latest bootstrap css https://jsbin.com/kujilitawu/edit?html,css,output

[tomlutzenberger]

Why is the text outside of the label? That's what it's for.
This solves it for me:
<span class="custom-control-description text-muted">Display legend</span>

[Gillardo]

the text "Display Legend" is just the help text, the "label" is the "Legend" text

[tomlutzenberger]

In this case your markup is basically wrong.

[Gillardo]

How can my markup be wrong? I would like Legend to appear next to the checkbox, and my help text (which says Display Legend) to appear under it...

This <span class="custom-control-description text-muted">Display legend</span> does not solve the issue, as you can see in the jsbin, the label appears next to it still

[tomlutzenberger]

As long as this is not a bug, I'd recommend to ask such questions on sites like stackoverflow or similar.

[stone1113]

wow吼厉害