如何在同一行上放置多个Bootstrap输入？

Question

我有以下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>

JSFIDDLE

它呈现如下：

如何将两个输入和按钮放在同一行？我一直在搞乱CSS，但似乎无法让它工作。我能够使用表格，但我知道CSS解决方案会“更好”。

Answer 1

您可以在此处找到的Bootstrap文档中使用内联表单：https://getbootstrap.com/docs/3.4/css/#forms-inline

'form-inline'类可能就是你想要的。

Answer 2

选项1 - 内联表格：

使用.form-inline类在单个水平行上显示一系列表单控件和按钮

但

您可能需要手动寻址宽度和对齐方式

选项2 - 使用网格：

对于更具响应性的结构化表单布局，您可以使用Bootstrap的预定义网格类

您的代码适用于选项2.您可以通过更改col-md- *来控制元素的宽度。

<div class="form-group row"> 

  <div class="col-md-8" >
   <input type="text" class="form-control" name="watch" value="" placeholder="watch">
  </div>

  <div class="col-md-2" > 
    <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>
  </div>

  <div class="col-md-2">
    <span class="btn btn-primary" onclick="update($(this));"><span class="glyphicon glyphicon-upload" aria-hidden="true"></span> Update</span>
  </div>
</div>

这就是它看起来像Display inline elements in form by using the grid

Answer 3

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

你也可以让其中一个比其他人更大：

<div class="row">
   <div class="col-xs-7">
   </div>
   <div class="col-xs-3">
   </div>
   <div class="col-xs-2">
   </div>
</div>

只要他们加起来12。

Demo

Bootstrap Grid

Answer 4

在Bootstrap 4中，您使用多个

<div class="col"></div>