title: Bootstrap checkbox and radio button label issue in Google Chrome
body: <p>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.</p>
  
  <p>Here is a screencap of the intended behavior, and what it looks like in the following environments:</p>
  
  <ul>
  <li>Safari on my Mac</li>
  <li>Safari on my iPhone</li>
  <li>Safari on my family's iPad</li>
  <li>Google Chrome on my friend's Mac</li>
  <li>Google Chrome on my friend's PC</li>
  </ul>
  
  <p><a href="http://d.pr/i/Fvq9">Correct Label Behavior: No Word Wrap</a></p>
  
  <p>The following is a screencap of the broken behavior, which manifests itself in the following environments:</p>
  
  <ul>
  <li>Google Chrome on my Mac</li>
  <li>Google Chrome on my PC</li>
  </ul>
  
  <p><a href="http://d.pr/i/SQ3p">Incorrect Label Behavior: Unnecessary Word Wrap</a></p>
  
  <p>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...</p>
  
  <ul>
  <li>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.</li>
  <li>There is no connection between my Mac and my PC exhibiting the bad behavior, besides being physically located in the same room.</li>
  <li>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.</li>
  </ul>
  
  <p>So I'm wondering two things...</p>
  
  <ol>
  <li><p><strong>Is anyone else experiencing the bad behavior in the second image or is it just me?</strong></p></li>
  <li><p><strong>Where did I screw up?</strong></p></li>
  </ol>
  
  <p>Here are some relevant code snippets:</p>
  
  <p>From index.html...</p>
  
  <pre><code>&lt;form class="form-horizontal" id="estimate" action="#estimate" method="post"&gt;
  ...
  &lt;!-- Room Input --&gt;
  &lt;div class="control-group"&gt;
      &lt;label class="control-label"&gt;Which rooms need cleaning?&lt;/label&gt;
      &lt;div class="controls"&gt;
          &lt;!-- Multiple Checkboxes --&gt;
          &lt;label class="checkbox inline"&gt;
              &lt;input type="checkbox" name="kitchen" value="Yes"&gt;
              Kitchen
          &lt;/label&gt;
          &lt;label class="checkbox inline"&gt;
              &lt;input type="checkbox" name="dining" value="Yes"&gt;
              Dining Room
          &lt;/label&gt;
          &lt;label class="checkbox inline"&gt;
              &lt;input type="checkbox" name="living" value="Yes"&gt;
              Living Room
          &lt;/label&gt;
          &lt;label class="checkbox inline"&gt;
              &lt;input type="checkbox" name="family" value="Yes"&gt;
              Family Room
          &lt;/label&gt;
          &lt;label class="checkbox inline"&gt;
              &lt;input type="checkbox" name="office" value="Yes"&gt;
              Office or Study
          &lt;/label&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Form-related CSS...</p>
  
  <pre><code>/* 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 */
  }
  </code></pre>
  
  <p>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>
  
  <p>P.S. I can't embed images or post more than 3 hyperlinks without 10 rep - sorry about that. :[</p>