Html 引导窗体复选框未正确对齐

我有一个引导表单。有两个性别复选框。我希望它们与文本并排对齐，但它们没有正确对齐

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

电子邮件地址
用户名
暗语
暗语
性别
男性

女性

登录

这是JSFIDLE

---

我尝试过的代码。

我修改了您的代码，将复选框及其标签包装在标签标签中。此外，我将复选框移动到标签文本之前。见下面的代码：

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

暗语
暗语
性别

男性的


女的

出生日期
出生日期
提交

这是引导复选框的标准格式。您还希望

名称

表示此表单组的内容（性别），而

值

表示所选复选框的内容（男性/女性）

性别
男性的
女的

暗语
暗语
性别
男性的
女的
出生日期
出生日期
提交

首先，要选择一个不应该使用复选框的性别，请使用单选按钮。这样你的用户就可以选择他们的性别，而不是两种性别。 使其成为收音机，然后它将自动对齐

暗语
暗语
性别
男性的


女的
出生日期
出生日期
提交

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>