如何将多个 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 但似乎无法让它工作。我能够让它与 table 一起工作，但我知道 CSS 解决方案是 "better."

Answer 1

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

'form-inline' class 可能就是您要找的。

Answer 2

使用 xs phone 大小的网格布局以强制网格响应，网格分为 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 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 Inline Form Documentation 所述。您需要手动解决宽度和对齐问题。

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

Answer 4

在Bootstrap4中你使用了多个

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

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

How to put multiple Bootstrap inputs on same line?

css

twitter-bootstrap

twitter-bootstrap-3