twitter-bootstrap 使用 Twitter Bootstrap 水平放置表单字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15876669/
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
Place form fields horizontally using Twitter Bootstrap
提问by Billa
How do we place form fields horizontally using Twitter Bootstrap
我们如何使用 Twitter Bootstrap 水平放置表单字段
I tried below HTML code. But it shows one by one like below
我试过下面的 HTML 代码。但它像下面一样一一显示
First Name- Text Box
Last Name- Text Box
Search
<form class="form-horizontal"> <div class="control-group"> <label class="control-label" for="first">First Name</label> <div class="controls"> <input type="text" id="first" placeholder="firstname"> </div> </div> <div class="control-group"> <label class="control-label" for="lastname">Last Name</label> <div class="controls"> <input type="text" id="lastname" placeholder="Last Name"> </div> </div> <div class="control-group"> <div class="controls"> <button type="submit" class="btn">Search</button> </div> </div> </form>
名字- 文本框
姓氏- 文本框
搜索
<form class="form-horizontal"> <div class="control-group"> <label class="control-label" for="first">First Name</label> <div class="controls"> <input type="text" id="first" placeholder="firstname"> </div> </div> <div class="control-group"> <label class="control-label" for="lastname">Last Name</label> <div class="controls"> <input type="text" id="lastname" placeholder="Last Name"> </div> </div> <div class="control-group"> <div class="controls"> <button type="submit" class="btn">Search</button> </div> </div> </form>
I want First Name and Last Name should be placed horizontally in first line and in next line Search Button.
我希望名字和姓氏应该水平放置在第一行和下一行搜索按钮中。
Like this
像这样
First Name- Text Box Last Name- Text Box
Search
名字- 文本框 姓氏- 文本框
搜索
回答by Dmonix
Add inlineclass to First name, Last name control-groupdiv:
将inline类添加到名字，姓氏control-groupdiv：
<div class="control-group inline">
CSS
CSS
.inline {
display:inline-block;
}
Working fiddle http://jsfiddle.net/GgSRN/
回答by muneebShabbir
try this
试试这个
<form class="form-group form-inline">
<label class="control-label" for="first">First Name</label>
<input type="text" id="first" placeholder="firstname">
<label class="control-label" for="lastname">Last Name</label>
<input type="text" id="lastname" placeholder="Last Name">
<div>
<button type="submit" class="btn">Search</button>
</div>
</form>
check bootstrap inline Formit will be good to go as you said.
检查bootstrap inline Form按照你说的去做就好了。
回答by Alex Lynham
Use CSS in a separate file to style your html. I'd personally wrap them in a <div class="row">using Bootstrap and use one of those for each 'row' you want to create.
在单独的文件中使用 CSS 来设置 html 的样式。我个人将它们包装在<div class="row">using Bootstrap 中，并为您要创建的每个“行”使用其中一个。
