bootstrap vermasselt Formular

Question

Screenshot of form

Ich habe Probleme mit Bootstrap. Ich habe ein Formular mit drei Textfeldern. Das oberste Textfeld, die E-Mail, ist nicht mit den übrigen Textfeldern ausgerichtet. Ich habe die HTML enthalten:

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

Ich verstehe nicht, was ich falsch mache. Jede Hilfe wäre dankbar, danke.

Answer 1

Mit Formularklasse nur einmal nicht wieder & wieder und wenn Sie wollen, um Text wie „E-Mail“, dann Verwenden Sie <label class="control-label col-sm-4" for="email">Email</label> ansonsten keine Verwendung und verwenden Sie nur 12 Spalten als [col-sm-2] für Label und für Eingabe [col-sm-10] oder Sie können als [col-sm-4] oder [col-sm-4] verwenden 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

Sie einige CSS-Klasse missplaced haben, ersetzen Sie die Formular-Code mit folgenden, Ihr Problem lösen:

<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

Sie falsche HTML-Code verwendet haben. Ersetzen Sie Ihren Formularcode mit folgendem, wird Ihr Problem lösen:

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

Hier ist mein jsfiddle Code: https://jsfiddle.net/0oeabj76/1/