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

如果运行代码，您将不得不调整窗口大小。
我还设置了一个 fiddle for the inline-form

谢谢

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>

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