bootstrap表單複選框未正確對齊

Question

我有一個引導form.there有兩個性別的複選框。我期待他們並排排列的文本，但這些都沒有正確對齊。

<form class="form-block"> 
    <div class="form-group"> 
    <label class="sr-only" for="exampleInputEmail3">Email address</label> 
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email"> 
    </div> 
      <div class="form-group"> 
    <label class="sr-only" for="exampleInputEmail3">username</label> 
    <input type="text" class="form-control" id="username" placeholder="username"> 
    </div> 
    <div class="form-group"> 
    <label class="sr-only" for="exampleInputPassword3">Password</label> 
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password"> 
    </div> 
      <div class="form-group"> 
    <label class="sr-only" for="exampleInputPassword3">Password</label> 
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password"> 
    </div> 
     GENDER 
    <div class="checkbox"> 
    <p> MALE 
    <input type="checkbox" name="checkbox" value="gender"></p> 

     <p> FEMALE 
    <input type="checkbox" name="checkbox" value="gender"> </p> 



    </div> 
    <button type="submit" class="btn btn-default">Sign in</button> 
</form> 

這裏的jsfiddle link 的我試過的代碼。

Answer 1

這是引導複選框的標準格式。你也想的name表示這種形式的羣體大約是（性別）是什麼，以及value在所選擇的複選框代表什麼（男/女）

GENDER 
<div class="checkbox"> 
    <label><input type="checkbox" value="male" name="gender"> MALE</label> 
</div> 
<div class="checkbox"> 
    <label><input type="checkbox" value="female" name="gender"> FEMALE</label> 
</div> 

https://jsfiddle.net/r6ehhhtd/1/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script> 
 
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet"/> 
 
<div class="form-group"> 
 
    <label class="sr-only" for="exampleInputPassword3">Password</label> 
 
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password" name="password" > 
 
    </div> 
 
      <div class="form-group"> 
 
    <label class="sr-only" for="exampleInputPassword3">Password</label> 
 
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password"> 
 
    </div> 
 
    
 
    
 
     GENDER 
 
<div class="checkbox"> 
 
    <label><input type="checkbox" value="male" name="gender"> MALE</label> 
 
</div> 
 
<div class="checkbox"> 
 
    <label><input type="checkbox" value="female" name="gender"> FEMALE</label> 
 
</div> 
 

 

 
      <div class="form-group"> 
 
    <label class="sr-only" for="exampleInputPassword3">date of birth</label> 
 
date of birth  
 
       <input type="date" class="form-control" id="exampleInputPassword3" placeholder="Password"> 
 
    </div> 
 
    <button type="submit" class="btn btn-default" name="submit" value="submit">submit</button> 
 
</form> 
 
     
 
     
 
    

Answer 2

我修改了代碼，將複選框及其標籤包裝在標籤標籤內。另外，我將複選框移至標籤文本之前。請參閱下面的代碼：

<form> 
    <div class="form-group"> 
     <label class="sr-only" for="exampleInputPassword3">Password</label> 
     <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password" name="password" > 
    </div> 

    <div class="form-group"> 
     <label class="sr-only" for="exampleInputPassword3">Password</label> 
     <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password"> 
    </div> 
    GENDER 

    <div class="checkbox"> 
     <p> 
      <label><input type="checkbox" name="checkbox-male" value="gender"> MALE</label> 
     </p> 

     <p> 
      <label><input type="checkbox" name="checkbox-female" value="gender"> FEMALE</label> 
     </p> 
    </div> 

    <div class="form-group"> 
     <label class="sr-only" for="exampleInputPassword3">date of birth</label> 
     date of birth  
     <input type="date" class="form-control" id="exampleInputPassword3" placeholder="Password"> 
    </div> 

<button type="submit" class="btn btn-default" name="submit" value="submit">submit</button> 
</form> 

Answer 3

首先，選擇一個性別，你不應該使用複選框，使用單選按鈕。這樣你的用戶可以選擇他們的性別，而不是兩性。 使它無線電，然後它會自動對齊。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<form> 
 
<div class="form-group"> 
 
    <label class="sr-only" for="exampleInputPassword3">Password</label> 
 
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password" name="password" > 
 
    </div> 
 
      <div class="form-group"> 
 
    <label class="sr-only" for="exampleInputPassword3">Password</label> 
 
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password"> 
 
    </div> 
 
     GENDER 
 
    <div class="container-fluid"> 
 
    <input type="radio" name="sex" id="male"><label>Male</label> 
 
<br> 
 
    <input type="radio" name="sex" id="female" value="Female"><label>Female</label> 
 
    </div> 
 
      <div class="form-group"> 
 
    <label class="sr-only" for="exampleInputPassword3">date of birth</label> 
 
date of birth  
 
       <input type="date" class="form-control" id="exampleInputPassword3" placeholder="Password"> 
 
    </div> 
 
    <button type="submit" class="btn btn-default" name="submit" value="submit">submit</button> 
 
</form>