甚至在整个表格中制作标签和输入框

Question

我找到了一个链接CSS tricks，但它没有奏效。事实上，它使我的标签位于我的输入字段之上。如果我有一个标签Last Name和一个低于它的name，我正在使用bootstrap。我试图让标签和输入字段变得均匀。

实施例：

<div class="col-xs-6 col-sm-4"> 
    <label>Last Name:</label> 
    <input type="text" class="textBoxSize" name="lastname" [(ngModel)]="user.lastName"> 
</div> 

<div class="col-xs-6 col-sm-4"> 
    <label>First Name:</label> 
    <input type="text" class="textBoxSize" name="firstname" [(ngModel)]="user.lastName"> 
</div> 

<div class="col-xs-6 col-sm-4"> 
    <label>MI:</label> 
    <input type="text" class="textBoxSizeSmall" name="middleName" [(ngModel)]="user.lastName"> 
</div> 

我知道[(ngModel)]是相同的。

Answer 1

由于您已经在使用Bootstrap，因此我建议使用它们的现有方法通过其网格类以水平布局标记&元素。请参阅：http://getbootstrap.com/css/#forms-horizontal和更新plunkr需要你不得不进一步编辑：http://plnkr.co/edit/k3A4jZPdkQbysfmOcXFi?p=preview

否则，手动修复将是使标签上的标签左浮动和一组宽度，但设置宽度&表单字段打败响应的目的。

label { 
    float: left; 
    width: 100px; 
}