来自官方文档:
Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form (which doesn't have to be a ). Doing so changes .form-groups to behave as grid rows, so no need for .row.
所以我尝试了:
<form class="form-horizontal">
<div class="form-group">
<input type="text" class="col-md-2 form-control" placeholder="Cantidad">
<input type="text" class="col-md-6 form-control" placeholder="Unidad">
</div>
</form>
但似乎 form-control
类会让它们各自返回到自己的一行。
这是我得到的:
如何实现将两个输入放在同一行?
最佳答案
将 form-inline
添加到表单类。请注意,如果表格太小,它仍会“溢出”。在这种情况下,如果您不希望所有 form-group
都是内联的,请使用单独的 div 作为间距。
表单内联示例:
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="col-md-10 col-md-offset-1">
<form class="form-horizontal form-inline">
<div class="form-group">
<input type="text" class="col-md-2 col-xs-6 form-control" placeholder="Cantidad">
<input type="text" class="col-md-6 col-xs-6 form-control" placeholder="Unidad">
</div>
</form>
</div>
</div>
单独的 Div 示例: fiddle
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="col-md-10 col-md-offset-1">
<form class="form-horizontal">
<div class="form-group">
<div class="input-group">
<div class="col-md-2 col-xs-6">
<input type="text" class=" form-control" placeholder="Cantidad" />
</div>
<div class="col-md-6 col-xs-6">
<input type="text" class=" form-control" placeholder="Unidad" />
</div>
</div>
</div>
</form>
</div></div>
关于html - 如何使 Twitter Bootstrap 样式的表单连续包含多个输入?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28513051/