CSS 如何将多个 Bootstrap 输入放在同一行上？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28786475/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to put multiple Bootstrap inputs on same line?
提问by Nate
I have the following HTML:
我有以下 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>
It renders like this:
它呈现如下：
How can I get both inputs and the button on the same line? I've been messing with the CSS but can't seem to get it to work. I was able to get it working with a table, but I know a CSS solution would be "better."
如何在同一行上同时获得输入和按钮？我一直在搞乱 CSS，但似乎无法让它工作。我能够让它与表格一起工作，但我知道 CSS 解决方案会“更好”。
回答by Kilreaux
You can use Inline Forms like in the Bootstrap Documentation found here: https://getbootstrap.com/docs/3.4/css/#forms-inline
您可以在此处找到的 Bootstrap 文档中使用内联表单：https: //getbootstrap.com/docs/3.4/css/#forms-inline
The 'form-inline' class is probably what you're looking for.
'form-inline' 类可能是您正在寻找的。
回答by addmoss
Solution 1 - Using the Grid
解决方案 1 - 使用网格
Use the Bootstrap's predefined grid classes for arranging the form elements.
使用 Bootstrap 的预定义网格类来排列表单元素。
The grid gives you a better control over the width of the elements and scales better than the Inline Form solution.
与内联表单解决方案相比，网格使您可以更好地控制元素的宽度和缩放比例。
<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>
Solution 2: Inline Form:
解决方案 2：内联表单：
Use an Inline Form, as described by Bootstrap Inline Form Documentation. You need to manually address the width and alignment.
使用内联表单，如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>
Running Example
运行示例
This JSFiddleshows both solutions running.
这个JSFiddle显示了两个正在运行的解决方案。
The sample code and fiddle are updated for Bootstrap 4.
示例代码和小提琴已针对 Bootstrap 4 更新。
回答by oqx
Use grid layout with xsphone size to force grid on responsive, the grid is divided into 12 cells so you'll need 3 x 4.
使用具有xs手机大小的网格布局来强制网格响应，网格分为 12 个单元格，因此您需要 3 x 4。
<div class="row">
<div class="col-xs-4">
</div>
<div class="col-xs-4">
</div>
<div class="col-xs-4">
</div>
</div>
You could also have one of them bigger than the others:
你也可以让其中一个比其他的大：
<div class="row">
<div class="col-xs-7">
</div>
<div class="col-xs-3">
</div>
<div class="col-xs-2">
</div>
</div>
As long as they add up to 12.
只要它们加起来是 12。
回答by luky
In Bootstrap 4 you use multiple
在 Bootstrap 4 中，您使用多个
<div class="col"></div>
