如何使 Twitter Bootstrap 样式的表单连续具有多个输入？答案

【问题标题】：How can I make a Twitter Bootstrap styled form have multiple inputs in a row?如何使 Twitter Bootstrap 样式的表单连续具有多个输入？
【发布时间】：2015-02-14 15:03:26
【问题描述】：

来自官方文档：

使用 Bootstrap 的预定义网格类来对齐标签和组通过将 .form-horizontal 添加到水平布局中的表单控件形式（不一定是 a ）。这样做会改变 .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 类将使它们各自返回到自己的单行。

这是我得到的：

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

【问题讨论】：

标签： html css forms twitter-bootstrap

【解决方案1】：

将form-inline 添加到表单类。请注意，如果表格太小，它仍然会“溢出”。在这种情况下，如果您不希望所有 form-groups 都内联，请使用单独的 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>

【讨论】：

这使我的form-groups 的其余部分也得到内联，这是我不想要的
你能举个例子吗？
OK nvm 修补后我认为最简单的方法是使用单独的 div 作为间距，我会更新我的答案
是的，我只是尝试使用单独的 div 并得到了结果......现在你知道如何删除每个 div 的填充（它甚至是填充吗？）他们不会匹配“父”宽度？
是的，有一点边距，您可以在元素的 style 属性中手动覆盖或覆盖 col-md-* 边距本身

【解决方案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

【讨论】：

添加form-control类会自动中断