css - 在整个表单中制作一个标签和输入框

Question

我找到了一个链接 CSS tricks但它没有用。事实上，它使我的标签位于输入字段的顶部。我正在使用 bootstrap，现在如果我有一个标签 Last Name 和它下面的一个 name 是偏移的。我试图让标签和输入字段均匀。

例子:

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