Inline Block input in a form with Bootstrap

Question

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.

Here is my code:

<div class="control-group">
    <div class="controls">
        <div class="input-prepend">
            <span class="add-on"> <i class="icon-lock"></i>
            </span>
            <input path="q1" class='input-xlarge' type='text' value='Name of my father'readonly="yes"/>
        </div>
    </div>
</div>
<div class="control-group">
    <div class="controls">
        <div class="input-prepend">
            <span class="add-on"> <i class="icon-lock"></i>
            </span>
            <input path="r1" class='input-xlarge' type='text' value='' autofocus="autofocus" />
        </div>
    </div>
</div>

Here is a jsFiddle with my code to well understand my problem: http://jsfiddle.net/XHPMH/1/ Using inline-style attribute I have the result I'm expecting, but I would like to use as many as possible Twitter Bootstrap : http://jsfiddle.net/5Z3rP/

Edit: I'm performing client side validation with jQuery-validation, so I think I have to keep control-group css class

Solution

Look at the "Inline Form" section here: http://getbootstrap.com/2.3.2/base-css.html#forms

<form:form class="form-horizontal form-validate form-inline" method="POST" acceptCharset="UTF-8">

http://jsfiddle.net/5Z3rP/1/

I also removed the ".controls" div, which was unnecessary and preventing the inline style.