css - 带有 Bootstrap 的表单中的内联 block 输入

Question

我有一个包含一些输入的表单，但我不知道如何将这些输入与 Twitter Bootstrap 内联。我是 Twitter Bootstrap 的新手。

这是我的代码:

<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>

这是一个带有我的代码的 jsFiddle，可以很好地理解我的问题:http://jsfiddle.net/XHPMH/1/使用内联样式属性我得到了我期望的结果，但我想使用尽可能多的 Twitter Bootstrap:http://jsfiddle.net/5Z3rP/

编辑:我正在使用 jQuery 验证执行客户端验证，所以我认为我必须保留控制组 css 类

Answer 1

查看此处的“内联表单”部分: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/

我还删除了“.controls”div，这是不必要的并且阻止了内联样式。