提问人：Nate 提问时间：3/1/2015 更新时间：11/27/2019 访问量：81495
如何将多个 Bootstrap 输入放在同一行上？
How to put multiple Bootstrap inputs on same line?
问：
我有以下 HTML：
<input type="text" class="form-control" name="watch" value="" placeholder="watch">
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="number" class="form-control" name="price" value="" placeholder="Price (optional)" style="width: 140px;">
</div>
<span class="btn btn-primary" onclick="update($(this));"><span class="glyphicon glyphicon-upload" aria-hidden="true"></span> Update</span>
它呈现如下：
如何在同一行上同时获得输入和按钮？我一直在搞砸CSS，但似乎无法让它工作。我能够让它与表格一起工作，但我知道 CSS 解决方案会“更好”。
答：
19赞
Kilreaux
3/1/2015
#1
您可以使用内联表单，如此处的 Bootstrap 文档所示：https://getbootstrap.com/docs/3.4/css/#forms-inline
“form-inline”类可能就是你要找的。
3赞
oqx
3/1/2015
#2
使用具有手机大小的网格布局来强制网格响应，网格分为 12 个单元格，因此您需要 3 x 4。xs
<div class="row">
<div class="col-xs-4">
</div>
<div class="col-xs-4">
</div>
<div class="col-xs-4">
</div>
</div>
您也可以让其中一个比其他的更大：
<div class="row">
<div class="col-xs-7">
</div>
<div class="col-xs-3">
</div>
<div class="col-xs-2">
</div>
</div>
只要它们加起来是 12。
17赞
addmoss
4/17/2017
#3
解决方案 1 - 使用网格
使用 Bootstrap 的预定义网格类来排列表单元素。
与内联表单解决方案相比，网格可以更好地控制元素的宽度和比例。
<form>
<div class="form-row">
<div class="form-group col-md-7">
<input type="text" class="form-control" name="watch" value="" placeholder="watch">
</div>
<div class="form-group col-md-3">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">$</div>
</div>
<input type="text" class="form-control" id="price0" placeholder="Price (optional)">
</div>
</div>
<div class="form-group col-md-2">
<button type="submit" class="btn btn-primary" onclick="update($(this));"><i class="fa fa-arrow-circle-o-up" aria-hidden="true"></i> Update</button>
</div>
</div>
</form>
解决方案 2：内联表单：
使用内联表单，如 Bootstrap 内联表单文档中所述。 您需要手动解决宽度和对齐方式。
<form class="form-inline">
<div class="form-group">
<input type="text" class="form-control" name="watch" value="" placeholder="watch">
</div>
<div class="input-group m-2">
<div class="input-group-prepend">
<div class="input-group-text">$</div>
</div>
<input type="text" class="form-control" id="price" placeholder="Price (optional)">
</div>
<button type="submit" class="btn btn-primary m-2" onclick="update($(this));"><i class="fa fa-arrow-circle-o-up" aria-hidden="true"></i> Update</button>
</form>
运行示例
此 JSFiddle 显示正在运行的两个解决方案。
示例代码和 fiddle 已针对 Bootstrap 4 进行了更新。
0赞
luky
8/20/2018
#4
在 Bootstrap 4 中，您使用多个
<div class="col"></div>
评论