title: CSS Twitter Bootstrap Form
body: <p>I am having trouble implementing a form in Twitter Bootstrap2.</p>
  
  <p>I've set up a JS Fiddle <a href="http://jsfiddle.net/manishap/WNSCW/15/" rel="nofollow">http://jsfiddle.net/manishap/WNSCW/15/</a></p>
  
  <p>Here is the code:</p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;div id="ratingSubectives" class="row-fluid"&gt;
      &lt;form class="well" &gt;
          &lt;fieldset&gt;
              &lt;div class="control-group span3"&gt;
                  &lt;label class="control-label" for="select01"&gt;Aaaaaaaaaaaa&lt;/label&gt;
                  &lt;div class="controls"&gt;&lt;select id="select01"&gt;
                      &lt;option value=""&gt;&lt;/option&gt;
                      &lt;option value="A"&gt;A&lt;/option&gt;
                      &lt;option selected="selected" value="B"&gt;B&lt;/option&gt;
                      &lt;option value="C"&gt;C&lt;/option&gt;
                  &lt;/select&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="control-group span3"&gt;
                  &lt;label class="control-label" for="select02"&gt;Bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb&lt;/label&gt;
                  &lt;div class="controls"&gt;&lt;select id="select02"&gt;
                      &lt;option&gt;&lt;/option&gt;
                      &lt;option selected="selected" value="A"&gt;B&lt;/option&gt;
                      &lt;option value="B"&gt;B&lt;/option&gt;
                      &lt;option value="C"&gt;C&lt;/option&gt;
                  &lt;/select&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="control-group span3"&gt;
                  &lt;label class="control-label" for="select03"&gt;&lt;a href="#"&gt;Ccccccccccc&lt;/a&gt;&lt;/label&gt;
                  &lt;div class="controls"&gt;&lt;select id="select03" disabled&gt;
                      &lt;option value="A"&gt;A&lt;/option&gt;
                      &lt;option value="B"&gt;B&lt;/option&gt;
                      &lt;option selected="selected" value="C"&gt;C&lt;/option&gt;
                  &lt;/select&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="control-group span3"&gt;
                  &lt;label class="control-label" for="select03"&gt;&amp;nbsp;&lt;/label&gt;
                  &lt;div class="controls"&gt;&lt;button type="submit" class="btn"&gt;Submit&lt;/button&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/fieldset&gt;
      &lt;/form&gt;             
   &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>I'm trying to place 3 select controls with labels horizontally across a div. It looks right in English with short labels. However, eventually this is a site that is delivered in multiple languages, and if the labels get long (as in the middle selector), the label text overlaps the text next to it. How do I get the text to wrap?</p>
  
  <p>I tried adding a max-width: 100%, as per another answer and that didn't work. Maybe I put the labels in divs instead of label tags...</p>
  
  <p>Thanks for any suggestions.</p>