Question

我有这个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>

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

Answer 1

默认情况下，它在Bootstrap样式表中对齐，您可以提供表单和ID，并将这样的内容添加到样式表中：

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

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

JSBin处的工作样本。

Answer 2

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

Answer 3

只需使用它。

<强> CSS：

listy.push(listView);

对齐Bootstrap表单标签

3 个答案: