gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 00:51:55 25 4
gpt4 key购买 nike

我有两个输入字段供用户填写,即 usernamepassword。这是它的样子

enter image description here

下面是相同的代码

<!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>

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

我阅读了有关 form-control-static 的内容,但我无法在此处看到效果。我尝试将它用于 EmailPassword 之类的类

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

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

注意:我使用的是 Bootstrap 3

最佳答案

以上样式仅来自 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;
}

关于html - 如何垂直对齐多个输入字段的标签?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55708670/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com