Question

我有一个Bootstrap内联形式，它是6个输入，然后是一个按钮。如果它完全适合屏幕，它看起来很好，但随着屏幕变小，输入一次折叠在一个下方。我尝试在col-md-2中包装每个输入，但这使得表单看起来很奇怪。我不确定我是否做错了什么有没有什么方法可以将输入组合在一起，以便它们像6x1,3x2,2x3,1x6那样崩溃？

＆＃13;

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

＆＃13;

如果运行代码，则必须调整窗口大小我还设置了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

Answer 2

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

Bootstrap响应内联表单

2 个答案: