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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/18535256/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 18:08:56  来源:igfitidea点击:

Inline Block input in a form with Bootstrap

csstwitter-bootstrap

提问by thibon

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.

我有一个包含一些输入的表单,但我不知道如何将这些输入与 Twitter Bootstrap 内联。我是 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/

这是一个带有我的代码的 jsFiddle,可以很好地理解我的问题:http: //jsfiddle.net/XHPMH/1/使用内联样式属性我得到了我期望的结果,但我想使用尽可能多的 Twitter引导程序: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

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

回答by htxryan

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

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

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

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

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