Bootstrap响应式内联表单

Question

我有一个Bootstrap内联表单，包含6个输入框和一个按钮。如果全部适应屏幕大小，看起来很好，但是随着屏幕变小，输入框会逐一折叠。我尝试将每个输入框都放在col-md-2中，但这会使表单看起来很奇怪。我不确定是否做错了什么。
有没有办法将输入框分组，以便它们折叠成6x1、3x2、2x3或1x6的样式？

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <form class="form-inline">
    <div class="form-group">
      <input name="input1" placeholder="input1" class="form-control" required>
    </div>

    <div class="form-group">
      <input name="input2" type="number" placeholder="input2" class="form-control" step="any" required>
    </div>
    <div class="form-group">
      <label for="input3">Input 3
        <input name="input3" type="checkbox" id="input3">
      </label>
    </div>
    <div class="form-group">
      <input name="input4" type="number" placeholder="input4" class="form-control" step="any" required>
    </div>
    <div class="form-group" *ngIf="!property.input3">
      <input name="input5" type="number" placeholder="input5" class="form-control" required>
    </div>

    <div class="form-group">
      <input name="input6" type="number" placeholder="input6" class="form-control" step="any">
    </div>

    <button class="btn btn-default">Add</button>
  </form>
</div>

如果运行该代码，您将需要调整窗口大小。
我还为内联表单设置了一个演示。

谢谢

- Votemike

Answer 1

Bootstrap的网格系统非常好，但并不适用于所有情况。如果您想要的外观效果不完全符合要求，您可以编写覆盖样式表。话虽如此，使用他们的网格系统，我能够提供一个示例来满足您上面的请求。如果这更符合您的想法，请告诉我：

<div class="container">
  <form class="form-inline">
    <div class="form-group col-xs-12 col-sm-6 col-md-4 col-lg-2">
      <input name="input1" placeholder="input1" class="form-control" required>
    </div>

    <div class="form-group col-xs-12 col-sm-6 col-md-4 col-lg-2">
      <input name="input2" type="number" placeholder="input2" class="form-control" step="any" required>
    </div>
    <div class="form-group col-xs-12 col-sm-6 col-md-4 col-lg-1 input3">
      <label for="input3">Input 3
      </label>
      <input name="input3" type="checkbox" id="input3">
    </div>
    <div class="form-group col-xs-12 col-sm-6 col-md-4 col-lg-2">
      <input name="input4" type="number" placeholder="input4" class="form-control" step="any" required>
    </div>
    <div class="form-group col-xs-12 col-sm-6 col-md-4 col-lg-2" *ngIf="!property.input3">
      <input name="input5" type="number" placeholder="input5" class="form-control" required>
    </div>

    <div class="form-group col-xs-12 col-sm-6 col-md-4 col-lg-2">
      <input name="input6" type="number" placeholder="input6" class="form-control" step="any">
    </div>
    <div class="col-xs-12 col-lg-1">
      <button class="btn btn-default">Add</button>
    </div>
  </form>
</div>

这里是代码的CodePen链接：http://codepen.io/egerrard/pen/KaNxvW

- Eric G

---

这基本上就是我想要的。不过当它变成两列时，包含按钮的 div 似乎会覆盖其余表单的部分。 - Votemike

@Votemike 已更新。我在那个 div 上使用了 col-md-12，所以在 sm 和 xs 上它失去了 float: left;。Codepen 和答案已经更新为 col-xs-12。 - Eric G

@Votemike 如果这个答案解决了您的问题，请标记为正确。否则请告诉我如何帮助您。谢谢！ - Eric G

Answer 2

您可以使用 div 和 display:inline-block 样式将这些输入包装在一起，以使它们保持在一起。

- mfar17