我有一个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 我试过的代码。
答案 0 :(得分: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>
答案 1 :(得分:0)
我修改了你的代码,将复选框及其标签包装在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>
答案 2 :(得分:0)
首先,为了选择性别,你不应该使用复选框,使用单选按钮。这样,您的用户可以选择性别,而不是两性。 制作无线电,然后它会自动对齐。
<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>