title: Responsive bootstrap form not becoming responsive
body: <p>I am trying to build a form using bootstrap and need it to be responsive too. That is it needs to go from 4 colmn layout to 3 to 1 colmn layout deepending on width.</p>
  
  <p>My code is located at <a href="http://jsfiddle.net/AzMz2/1/" rel="nofollow">http://jsfiddle.net/AzMz2/1/</a>
  <em>updated with fluid</em> <strong>STILL NOT WORKING</strong></p>
  
  <p>You will notice that initially I have this as 4 columns. However, when I resize, it doesn't become 3 column. I need this to become 3 column and then as widths decreases to 2 and then to 1 column (aka responsiveness).  Also the columns need to align vertically and horizontally. That is also not happening. What am I doing wrong? I can not seem to figure out. Thanks in advance.</p>
  
  <pre><code>&lt;form class="form-horizontal" name="submitDetails" acttion="#"&gt;
    &lt;fieldset&gt;
      &lt;div class="control-group oneLine"&gt;
        &lt;label class="control-label" for="custom1"&gt;1. Did you telephone us?&lt;/label&gt;
        &lt;div class="controls"&gt;
          &lt;label class="radio span2" for=""&gt;
            &lt;input name="custom1" id="custom1" value="Yes" checked="checked" type="radio"&gt;
            Yes &lt;/label&gt;
          &lt;label class="radio span2" for=""&gt;
            &lt;input name="custom1" id="custom1" value="No" type="radio"&gt;
            No &lt;/label&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="control-group  oneLine"&gt;
        &lt;label class="control-label" for="custom2"&gt;2. How did you hear about us?&lt;/label&gt;
        &lt;div class="controls"&gt;
          &lt;div class="row-fluid"&gt;
            &lt;label class="radio span3" for=""&gt;
              &lt;input name="custom2" id="custom2" value="1" checked="checked" type="radio"&gt;
              Newspaper &lt;/label&gt;
            &lt;label class="radio span3" for=""&gt;
              &lt;input name="custom2" id="custom2" value="2" type="radio"&gt;
              Billboard &lt;/label&gt;
            &lt;label class="radio span3" for=""&gt;
              &lt;input name="custom2" id="custom2" value="3" type="radio"&gt;
              Yellow Pages &lt;/label&gt;
            &lt;label class="radio span3 " for=""&gt;
              &lt;input name="custom2" id="custom2" value="4" type="radio"&gt;
              Radio &lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="row-fluid"&gt;
            &lt;label class="radio span3" for=""&gt;
              &lt;input name="custom2" id="custom2" value="5" type="radio"&gt;
              Google / Internet &lt;/label&gt;
            &lt;label class="radio span3" for=""&gt;
              &lt;input name="custom2" id="custom2" value="23" type="radio"&gt;
              White Pages &lt;/label&gt;
            &lt;label class="radio span3" for=""&gt;
              &lt;input name="custom2" id="custom2" value="7" type="radio"&gt;
              Referral &lt;/label&gt;
            &lt;label class="radio span3" for=""&gt;
              &lt;input name="custom2" id="custom2" value="8" type="radio"&gt;
              Television &lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="row-fluid"&gt;
            &lt;label class="radio span3" for=""&gt;
              &lt;input name="custom2" id="custom2" value="9" type="radio"&gt;
              Familiar with area &lt;/label&gt;
            &lt;label class="radio span3" for=""&gt;
              &lt;input name="custom2" id="custom2" value="10" type="radio"&gt;
              Magazine &lt;/label&gt;
            &lt;label class="radio span3" for=""&gt;
              &lt;input name="custom2" id="custom2" value="21" type="radio"&gt;
              Catalogue &lt;/label&gt;
            &lt;label class="radio span3" for=""&gt;
              &lt;input name="custom2" id="custom2" value="25" type="radio"&gt;
              Our website &lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="row-fluid"&gt;
            &lt;label class="radio inline" for=""&gt;
              &lt;input name="custom2" id="custom2" value="24" type="radio"&gt;
              1300 Number &lt;/label&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;br/&gt;
  &lt;div align="right"&gt;&lt;button&gt;SUBMIT&lt;/button&gt;&lt;/div&gt;
    &lt;/fieldset&gt;
  &lt;/form&gt;
  
  
      &lt;style type="text/css"&gt;
  body {
      background-color: #ffffff;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 12px;
      max-width: 640px;
      margin: 0 auto;
  }
  .oneLine .controls {
      background-color: #d8d8d8;
      margin:0px;
      display:inline-block;
      width:100%;
  }
  .control-group.oneLine &gt; label {
  
      float: none;
      text-align: left;
      width: 100%;
  }
  .error {
      color: #ff0000;
  }
  .radio.inline{
      margin-bottom:auto;
      vertical-align: auto;
  }
  &lt;/style&gt;
  </code></pre>