时间戳

首页 > 解决方案 > 如何垂直对齐多个输入字段的标签？

html - 如何垂直对齐多个输入字段的标签？

问题描述

我有两个输入字段供用户填写，即username和password。这是它的样子

在此处输入图像描述

下面是相同的代码

<!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <div class="container">
      <form class="form-horizontal">
        <div class="form-group">
          <label class="control-label col-sm-2" for="email">Email:</label>
          <div class="col-sm-3">
            <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
          </div>
        </div>
        <div class="form-group">
          <label class="control-label col-sm-2" for="pwd">Password:</label>
          <div class="col-sm-3">          
            <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
          </div>
        </div>
      </form>
    </div>
    
    </body>
    </html>

现在我希望EmailandPassword垂直对齐，就像输入字段对齐一样。

我读过form-control-static但我无法在这里看到效果。我尝试将它用于类Email和类似的Password东西

<label class="control-label col-sm-2 form-control-static" for="pwd">Password:</label>

但我没有看到任何变化。我究竟做错了什么？

注意：我使用的是 Bootstrap 3

标签： htmlcsstwitter-bootstrap-3

解决方案

您的代码似乎按预期工作...，尝试验证您是否进行了任何 css 更改...

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<body>

<div class="container">
  <form class="form-horizontal">
    <div class="form-group">
      <label class=" col-sm-2 col-xs-3" for="email">Email:</label>
      <div class="col-sm-3 col-xs-3">
        <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
      </div>
    </div>
    <div class="form-group">
      <label class=" col-sm-2 col-xs-3" for="pwd">Password:</label>
      <div class="col-sm-3 col-xs-3">          
        <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
      </div>
    </div>
  </form>
</div>
更新控制标签类默认情况下在更大的屏幕上将项目向右对齐..要解决它，您可以将其删除..或使用引导程序类...

推荐阅读