如何在同一行上放置多个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-*来控制元素的宽度.

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

这就是它的外观 ,通过使用网格显示形式的内联元素