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/