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
Inline Block input in a form with 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">
I also removed the ".controls" div, which was unnecessary and preventing the inline style.
我还删除了“.controls” div,这是不必要的并阻止了内联样式。

