引导程序输入表单对齐

Question

我正尝试使用引导程序和表单输入创建数据输入表单。

看来，直到一些行它把上线的一个条目，而不是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> 

如果你推出的预览窗口，并增加width，你应该能够看到的行为。

Answer 1

如果你希望你label和input始终在一条线正好与一个名为.form-group类一个div包裹两者（并删除所有col-md这些是电网系统，而不是form S），见Bootstrap Docs

<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 role="form"> 
 
    <div class="form-group"> 
 
     <label for="input16" class="">Label A</label> 
 
     <input type="number" class="form-control" id="Label A" placeholder="Label A"> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label for="input17" class="">Customer Label ALpha Beta</label> 
 
     <input type="number" class="form-control" id="Customer Label ALpha Beta" placeholder="Customer Label ALpha Beta"> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label for="input18" class="">Label C</label> 
 
     <input type="number" class="form-control" id="Label C" placeholder="Label C"> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label for="input15" class="">Label D</label> 
 
     <input type="number" class="form-control" id="Label AD" placeholder="Label D"> 
 
    </div> 
 
    </form> 
 
</fieldset>

Answer 2

不能完全确定，如果这是你想要的，但我猜你的意思是，对于一些屏幕尺寸标签d结束了第四列，而它应该是第一列。这里的问题在于，您的标签客户标签Alpha Beta占用太高的高度，并且由于引导程序的列只是float:left，的标签D的智能使用将位于其右侧。

调整代码的最简单方法是将一组包含3个标签/输入的组合包装在.row中，以在行满时清除浮动块。

<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将更好地为您工作。