如何在同一行上放置多个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会更好。

- Nate

---

它被称为内联表单：http://getbootstrap.com/css/#forms-inline - Quasdunk

Answer 1

您可以使用内联表单，就像在这里找到的Bootstrap文档一样：https://getbootstrap.com/docs/3.4/css/#forms-inline。

“form-inline”类可能是您要查找的。

- Kilreaux

Answer 2

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

- addmoss

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。

演示

Bootstrap 栅格系统

- oqx

Answer 4

在Bootstrap 4中，您可以使用多个

。

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

- luky