对齐引导表单标签答案

【问题标题】：Aligning the Bootstrap Form Labels对齐引导表单标签
【发布时间】：2023-03-27 01:31:01
【问题描述】：

我有这个 Bootstrap 水平表单，但问题是标签文本未对齐。如何对齐标签文本。

 <!DOCTYPE HTML>
 <html>

    <head>
    <link  rel="stylesheet"  href="bootstrap/css/bootstrap.min.css" />  
    </head>

    <body>

        <div class="container">            
            <div class="row">
                <div class="col-md-12">

                 <h3>Signup Form</h3><hr/>
                 <form class="form-horizontal" role="form">

                    <div class="form-group">
                      <label for="username" class="col-sm-2 control-label">Username</label>
                        <div class="col-sm-4">
                        <input type="text" placeholder="Your Username ..." class="form-control"/>
                        </div>
                    </div>

                    <div class="form-group">
                      <label for="email" class="col-sm-2 control-label">Email</label>
                        <div class="col-sm-4">
                        <input type="email" placeholder="Your Email ..." class="form-control"/>
                        </div>
                    </div>

                 </form>

               </div>
             </div>            
          </div>

        <script src="bootstrap/js/jquery-1.11.3.js"></script> 
        <script src="bootstrap/js/bootstrap.min.js"></script>         
    </body>

</html>

我希望电子邮件标签与用户名标签对齐

【问题讨论】：

它们是对齐的，在右边......如果你想把它放在左边，那么在css中添加text-align: left;
如果你想自己做而不是删除 class control-label 并为此写你的css
如果您的问题得到解决，您可以接受对您有帮助的答案，或者如果您以更好的方式解决了它，您可以发布自己的答案...

标签： css twitter-bootstrap

【解决方案1】：

默认情况下它在 Bootstrap 样式表中是正确对齐的，您可以提供您的表单和 id 并将类似的内容添加到您的样式表中：

#signup-form label {
 text-align: left;
}

这会将表单中的所有标签左对齐，您可以根据需要修改选择器以限制此样式的范围。

JSBin 的工作示例。

【讨论】：

【解决方案2】：

.form-horizontal .control-label {
    text-align: left;
}

【讨论】：

请考虑编辑您的帖子，以添加更多关于您的代码的作用以及它为何能解决问题的说明。大部分只包含代码的答案（即使它正在工作）通常不会帮助 OP 理解他们的问题。

【解决方案3】：

只需使用这个。

CSS：

.control-label {
  text-align:left!important;
}

【讨论】：

我不会在这里使用!important