bootstrap搞砸了形式

Question

Screenshot of form

我在Bootstrap中遇到问题。我有一个带有三个文本框的表单。顶部文本框，电子邮件，与其他文本框不一致。我已经包含了HTML：

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

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

Answer 1

使用表单类只有一次没有再&再次，如果你想要一个像“电子邮件”，那么文本使用<label class="control-label col-sm-4" for="email">Email</label>否则不使用它，并且对于标签和输入[col-sm-10]只使用12列作为[col-sm-2]，或者可以使用[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>

Answer 2

你missplaced几个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 3

你使用了错误的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/