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，这是不必要的并且阻止了内联样式。

带有Bootstrap的表单中的内联块输入

1 个答案: