造型引导主题复选框与单行标签

Question

I am attempting to utilize the bootstrap "form-control" class on a checkbox within a label tag so that clicking the text also checks the textbox.

Here is the JSFiddle: https://jsfiddle.net/vpm13m2b/

The HTML for the control is:

<div class="form-group">
    <div>
        Attempt #1
        <span class="red">*</span>
    </div>
    <label>
        <input type="checkbox" class="form-control" /> Yes
    </label>
</div>
<div class="form-group">
    <div>
        Attempt #2
        <span class="red">*</span>
    </div>
    <label class="checkbox-inline">
        <input type="checkbox" class="form-control" /> Yes
    </label>
</div>

With attempt 1, the "Yes" text is pushed to a separate line. With attempt 2, the checkbox and underlying controls are pulled the width of the page, which also pushes the "Yes" text to the second line. The screenshot of this is below:

Here's what I am trying to do:

• The styled checkbox is displayed next to the "Yes"
• Selecting the text also selects the checkbox
• Keep the solution clean (trying to avoid dealing with float:left or jquery click events on the text to check the checkbox)

It just seems that there has to be a vanilla way to do this. All the bootstrap docs just show standard checkboxes - nothing with the form-control class styling the checkbox for their nice inline examples.

Answer 1

Remove the class="form-control" from your checkboxes. As the bootstrap docs state:

All textual <input> , <textarea> , and <select> elements with .form-control are set to width: 100%; by default.

jsFiddle example

The .form-control class has about a dozen properties being set that you most likely don't want or need.

Answer 2

Here's what I came up with to fix my issue. I need to retain the .form-control class on the checkbox element so that the checkbox control is styled by the bootstrap theme. My busines requirement is to use the themed, not default browser, checkbox.

See working JSFiddle here: https://jsfiddle.net/vpm13m2b/3/

input[type=checkbox].form-control {
    width: 25px;
    height: 25px;
    display: inline-block;
    vertical-align: -8px;
}

The css above was added into my site's stylesheet so that the form-control checkboxes retain the style, and I don't have to change the existing code that has a label containing the checkbox and caption to the right of the checkbox vertically centered.

This works with my original attempt (#1) on the html below:

<div class="form-group">
    <div>
        Attempt #1
        <span class="red">*</span>
    </div>
    <label>
        <input type="checkbox" class="form-control" /> Yes
    </label>
</div>

The resulting output matches what I'm looking for in the original question: