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>

如果运行代码，则必须调整窗口大小。
我还为内联表单设置了一个小提琴

谢谢

Answer 1

Bootstraps 网格系统很棒，但它并不适合阳光下的一切。如果事情看起来不像你想要的那样，你总是可以写覆盖 css。话虽如此，使用他们的网格系统，我能够想出一个满足您上述要求的示例。如果这更像您的想法，请告诉我：

<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