Question

我有两个输入字段供用户填写，即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>

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

我读到有关form-control-static的信息，但在这里看不到效果。我尝试将其用于Email和Password的类，例如

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

但是我看不到任何变化。我在做什么错了？

注意：我正在使用Bootstrap 3

Answer 1

您的代码似乎可以正常工作...，请尝试验证是否进行了CSS更改...

更新控件标签类默认情况下是在较大屏幕上将项目右对齐。要解决该问题，您可以将其删除。或使用bootstrap alingment classes ...

Answer 2

以上样式仅来自Bootstrap 3，“ Text-align：right”

@media (min-width: 768px)
.form-horizontal .control-label {
    padding-top: 7px;
    margin-bottom: 0;
    text-align: right;
}

如果要将标签向左对齐，请按如下所示在代码中覆盖以上属性：

@media (min-width: 768px)
    .form-horizontal .control-label {
        text-align: left;
    }

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

2 个答案: