表格混乱

Question

Screenshot of form

我在使用Bootstrap时遇到了麻烦。我有一个带有三个文本框的表单。顶部文本框电子邮件未与其他文本框对齐。我已经包含了HTML：

＆＃13;

＆＃13;

<form role="form" action="register.php" method="POST" form-horizontal novalidate>

<form class="form-horizontal" role="form">
    <div class="form-group">
        <label class="control-label col-sm-4" for="email"></label>
        <div class="col-sm-10">
            <input type="email" class="form-control" id="email"  placeholder="Enter Email">
        </div>
      </form>
    </div>

<form class="form-horizontal" role="form">
    <div class="form-group">
        <span></span>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="username" placeholder="Enter username">

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

<form class="form-horizontal" role="form">
    <div class="form-group">
        <label class="control-label col-sm-4" for="username"></label>
        <div class="col-sm-10">
            <input type="password" class="form-control" id="password" placeholder="Enter password ">
        </div>
    </div>
</form>
<div class="form-group">
    <div class="col-sm-offset-0 col-sm-10">
        <button type="submit" class="btn btn-primary" name="submit">Register</button>
    </div>
 </div>
</form>

＆＃13;

＆＃13;

＆＃13;

我不明白我做错了什么。任何帮助将不胜感激，谢谢。

Answer 1

您错过了几个css类，用以下代码替换您的表单，将解决您的问题：

<form role="form" action="register.php" method="POST" class='form-horizontal novalidate'  role="form">
<div class="form-group">
    <label for="email" class="col-sm-2 control-label">Email</label> 
    <div class="col-sm-10"> 
        <input type="email" class="form-control" id="email" placeholder="Enter Email"> 
    </div> 
</div> 
<div class="form-group">
    <label for="username" class="col-sm-2 control-label">UserName</label> 
    <div class="col-sm-10"> 
        <input type="text" class="form-control" id="username" placeholder="Enter User Name"> 
    </div> 
</div> 
<div class="form-group"> 
    <label for="password" class="col-sm-2 control-label">Password</label> 
    <div class="col-sm-10"> 
        <input type="password" class="form-control" id="password" placeholder="Enter Password"> </div> 
    </div> 
</div>  
<div class="form-group"> 
    <div class="col-sm-offset-2 col-sm-10"> 
        <button type="submit" class="btn btn-primary" name="submit">Register</button>
    </div> 
</div> 
</form>

Answer 2

您使用了错误的HTML代码。用以下代码替换您的表单，将解决您的问题：

    <form role="form" action="register.php" method="POST" form-horizontal novalidate>

 <div class="form-group">
     <label for="email" class="col-sm-2 control-label">Email</label> 
      <div class="col-sm-10">
          <input type="email" class="form-control" id="email"  placeholder="Enter Email">
      </div> 
 </div> 
 <div class="form-group">
   <label for="username" class="col-sm-2 control-label">User Name</label>
   <div class="col-sm-10">
     <input type="text" class="form-control" id="username" placeholder="Enter username">
   </div>
</div>
<div class="form-group">
    <label for="password" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
        <input type="password" class="form-control" id="password" placeholder="Enter password ">
     </div>
</div>
 <div class="form-group">
      <div class="col-sm-offset-0 col-sm-10">
            <button type="submit" class="btn btn-primary" name="submit">Register</button>
       </div>
</div>
</form>

这是我的jsfiddle代码：https://jsfiddle.net/0oeabj76/1/

Answer 3

仅使用表单类一次不再使用＆amp;再次，如果你想要像“电子邮件”这样的文字，那么使用<label class="control-label col-sm-4" for="email">Email</label>否则不使用它，并且只使用12列作为[col-sm-2]作为标签和输入[col-sm-10]，或者你可以用作[col-sm-4]或[col-sm-8]

<form role="form" action="register.php" method="POST" class="form-horizontal novalidate">

                                    <div class="form-group">
                                        <div class="col-sm-12">
                                            <input type="email" class="form-control" id="email"  placeholder="Enter Email">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <div class="col-sm-12">
                                            <input type="text" class="form-control" id="username" placeholder="Enter username">

                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <div class="col-sm-12">
                                            <input type="password" class="form-control" id="password" placeholder="Enter password ">
                                        </div>
                                    </div>
                                <div class="form-group">
                                    <div class="col-sm-offset-2 col-sm-10">
                                        <button type="submit" class="btn btn-primary" name="submit">Register</button>
                                    </div>
                                 </div>
                                </form>