title: Inline Block input in a form with Bootstrap
body: <p>I have a form with some inputs and I can't figure out how to put these inputs inline with Twitter Bootstrap. I am new to Twitter Bootstrap.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;div class="control-group"&gt;
      &lt;div class="controls"&gt;
          &lt;div class="input-prepend"&gt;
              &lt;span class="add-on"&gt; &lt;i class="icon-lock"&gt;&lt;/i&gt;
              &lt;/span&gt;
              &lt;input path="q1" class='input-xlarge' type='text' value='Name of my father'readonly="yes"/&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="control-group"&gt;
      &lt;div class="controls"&gt;
          &lt;div class="input-prepend"&gt;
              &lt;span class="add-on"&gt; &lt;i class="icon-lock"&gt;&lt;/i&gt;
              &lt;/span&gt;
              &lt;input path="r1" class='input-xlarge' type='text' value='' autofocus="autofocus" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is a jsFiddle with my code to well understand my problem: <a href="http://jsfiddle.net/XHPMH/1/" rel="nofollow">http://jsfiddle.net/XHPMH/1/</a>
  Using inline-style attribute I have the result I'm expecting, but I would like to use as many as possible Twitter Bootstrap : <a href="http://jsfiddle.net/5Z3rP/" rel="nofollow">http://jsfiddle.net/5Z3rP/</a></p>
  
  <p><strong>Edit:</strong> I'm performing client side validation with jQuery-validation, so I think I have to keep control-group css class</p>