Question

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

<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

这是bootstrap复选框的标准格式。您还希望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

我修改了你的代码，将复选框及其标签包装在label标签中。此外，我将复选框移动到标签文本之前。请参阅以下代码：

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

bootstrap form复选框未正确对齐

3 个答案: