如何在文本框旁边对齐标签

Question

请帮我这个项目。 我要对齐用户名和文本框旁边的所有标签。 特别是在文本框的左侧。 我正在使用来自getbootstrap.com的主引导程序

这是我的代码：

 <div> <label>Username:</label> <input type="text" class="form-control" placeholder="Username" tabindex="1"><br> <input type="text" class="form-control" placeholder="Password" tabindex="2" float="right"><br> <input type="text" class="form-control" placeholder="Company Name" tabindex="3" float="right"><br> <input type="text" class="form-control" placeholder="Product Type" tabindex="4" float="right"><br> </div> 

Answer 1

您可能想为表单使用水平表单类。 另外，我注意到您输入的内容没有任何名称属性，我假设您需要。 文档： http : //getbootstrap.com/css/#forms

<form class="form-horizontal">
<div class="form-group">
  <label for="username" class="col-sm-2 control-label">Email</label>
  <div class="col-sm-10">
      <input type="text" class="form-control" name="username" placeholder="Username" tabindex="1" />
  </div>
</div>
<div class="form-group">
  <label for="password" class="col-sm-2 control-label">Password</label>
  <div class="col-sm-10">
    <input type="text" class="form-control" name="password" placeholder="Password" tabindex="2" />
  </div>
</div>
<div class="form-group">
  <label for="company_name" class="col-sm-2 control-label">Company Name</label>
  <div class="col-sm-10">
    <input type="text" class="form-control" name="company_name" placeholder="Company Name" tabindex="3" />
  </div>
</div>
<div class="form-group">
  <label for="product_type" class="col-sm-2 control-label">Product Type</label>
  <div class="col-sm-10">
    <input type="text" class="form-control" name="product_type" placeholder="Product Type" tabindex="4" />
  </div>
</div>
</form>