html - 如何使 Twitter Bootstrap 样式的表单连续包含多个输入？

Question

来自官方文档:

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 类会让它们各自返回到自己的一行。

这是我得到的:

如何实现将两个输入放在同一行？

Answer 1

将 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>