如何使Twitter Bootstrap样式表单连续多个输入？

Question

来自官方文档：

  

使用Bootstrap的预定义网格类来对齐标签和组   通过将.form-horizo​​ntal添加到水平布局中来控制表单   形式（不一定是）。这样做会改变   .form-groups表现为网格行，因此不需要.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添加到表单类。请注意，如果您使表单太小，它仍然会溢出＆＃39;。在这种情况下，如果您不希望所有form-group都是内联的，请为间距使用单独的div。

表单内联示例：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

单独的Div示例： fiddle

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

HTML

<form class="form-horizontal">
    <div class="form-group">
        <input type="text" class="col-md-2  pull-left" placeholder="Cantidad">
        <input type="text" class="col-md-6  pull-left" placeholder="Unidad">
    </div>  
</form>

jsfiddle