html - Bootstrap 输入表单对齐

Question

我正在尝试使用 Bootstrap 和表单输入创建数据输入表单。

它似乎工作得很好，直到在某些行上它把一个条目放在行上而不是 3。

我尝试过各种路线，但总是看到这种行为。

如果您能帮助我们理解为什么会造成这种伤害，我们将不胜感激。我有一个 plunker 的例子 here

<fieldset class="scheduler-border well">
  <legend class="scheduler-border">Customer</legend> 
  <form class="form-group" role="form">
    <div class="form-group left">      
      <label for="input16" class="col-md-2 control-label">Label A</label>
      <div class="col-md-2">
        <input type="number" class="form-control" id="Label A" placeholder="Label A">
      </div>
      <label for="input17" class="col-md-2 control-label">Customer Label ALpha Beta</label>
      <div class="col-md-2">
        <input type="number" class="form-control" id="Customer Label ALpha Beta" placeholder="Customer Label ALpha Beta">
      </div>
      <label for="input18" class="col-md-2 control-label">Label C</label>        
      <div class="col-md-2">
        <input type="number" class="form-control" id="Label C" placeholder="Label C">
      </div>
      <label for="input15" class="col-md-2 control-label">Label D</label>
      <div class="col-md-2">
        <input type="number" class="form-control" id="Label AD" placeholder="Label D">
      </div>
    </div>
  </form>
</fieldset>

如果您启动预览窗口并增加宽度，您应该能够看到该行为。

Answer 1

不完全确定这是否是您想要的，但我猜您的意思是对于某些屏幕尺寸，Label D 最终出现在第四列，而它应该出现在第一列。这里的问题是你的标签 Customer Label Alpha Beta 占据了太多的高度，因为 bootstrap 的列只是 float:left 的巧妙用法，Label D 将在它的右边。

调整代码的最简单方法是将 3 个标签/输入组包装在 .row 中，以便在行满后清除 float 。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<fieldset class="scheduler-border well">
  <legend class="scheduler-border">Customer</legend>
  <form class="form-group" role="form">

    <div class="form-group left container">
      <div class="row">
        <label for="input16" class="col-md-2 control-label">Label A</label>
        <div class="col-md-2">
          <input type="number" class="form-control" id="Label A" placeholder="Label A">
        </div>
        <label for="input17" class="col-md-2 control-label">Customer Label ALpha Beta</label>
        <div class="col-md-2">
          <input type="number" class="form-control" id="Customer Label ALpha Beta" placeholder="Customer Label ALpha Beta">
        </div>

        <label for="input18" class="col-md-2 control-label">Label C</label>
        <div class="col-md-2">
          <input type="number" class="form-control" id="Label C" placeholder="Label C">
        </div>
      </div>
      <div class="row">
        <label for="input15" class="col-md-2 control-label">Label D</label>
        <div class="col-md-2">
          <input type="number" class="form-control" id="Label AD" placeholder="Label D">
        </div>
      </div>
    </div>

  </form>
</fieldset>

当然，这个解决方案并不完美，例如，您的行最终可能会有不同的垂直距离。也许去掉 -col-* 并使用类 .form-inline 或 `.form-horizo​​ntal 会更好。