Bootstrap checkbox and radio button label issue in Google Chrome

Question

I'm having an issue with some Bootstrap inline checkbox and radio button labels, but only in some instances of Chrome. The website I'm working on is www.bostonsparkling.com.

Here is a screencap of the intended behavior, and what it looks like in the following environments:

• Safari on my Mac
• Safari on my iPhone
• Safari on my family's iPad
• Google Chrome on my friend's Mac
• Google Chrome on my friend's PC

Correct Label Behavior: No Word Wrap

The following is a screencap of the broken behavior, which manifests itself in the following environments:

• Google Chrome on my Mac
• Google Chrome on my PC

Incorrect Label Behavior: Unnecessary Word Wrap

It looks like the checkbox and radio button label text is wrapping unnecessarily, but only in some instances of Chrome. Here's some relevant troubleshooting information...

• The bad behavior has not always been present - it snuck up on me about a week ago and I just couldn't isolate the offending change.
• There is no connection between my Mac and my PC exhibiting the bad behavior, besides being physically located in the same room.
• I tried disconnecting my Google Account from Chrome on both machines and disabling all my extensions, thinking maybe some special case with an extension was screwing up layouts, but no dice.

So I'm wondering two things...

1. Is anyone else experiencing the bad behavior in the second image or is it just me?

2. Where did I screw up?

Here are some relevant code snippets:

From index.html...

<form class="form-horizontal" id="estimate" action="#estimate" method="post">
...
<!-- Room Input -->
<div class="control-group">
    <label class="control-label">Which rooms need cleaning?</label>
    <div class="controls">
        <!-- Multiple Checkboxes -->
        <label class="checkbox inline">
            <input type="checkbox" name="kitchen" value="Yes">
            Kitchen
        </label>
        <label class="checkbox inline">
            <input type="checkbox" name="dining" value="Yes">
            Dining Room
        </label>
        <label class="checkbox inline">
            <input type="checkbox" name="living" value="Yes">
            Living Room
        </label>
        <label class="checkbox inline">
            <input type="checkbox" name="family" value="Yes">
            Family Room
        </label>
        <label class="checkbox inline">
            <input type="checkbox" name="office" value="Yes">
            Office or Study
        </label>
    </div>
</div>

Form-related CSS...

/* Flip the margins and padding on inline checkboxes and radios */
.checkbox.inline,
.checkbox.inline + .checkbox.inline,
.radio.inline,
.radio.inline + .radio.inline {
    margin-left: 0 !important;
    margin-right: 15px !important;
    padding-top: 0 !important;
    padding-bottom: 5px !important;
}

/* Less vertical padding between form elements */
.form-horizontal
.control-group {
    margin-bottom: 10px; /* instead of 20px */
}

Let me know if you need anything else, if I broke any posting rules, or my code sucks, heh - this is my first website in like, a decade. I appreciate the help!

P.S. I can't embed images or post more than 3 hyperlinks without 10 rep - sorry about that. :[

Answer 1

Try white-space: nowrap; in your .checkbox.inline CSS. This will ensure no word wrapping occurs on any environment.

Answer 2

Is this a bug with Chrome 24?

https://github.com/twitter/bootstrap/issues/6599