Bootstrap 4 中带有单选按钮的内衬标签
Lining Labels with Radio buttons in Bootstrap 4
我正在尝试 Bootstrap 4 表单,我想在其中内联带有标签的单选按钮。我让它与 bootstrap 3 一起工作,但我似乎无法与 bootstrap 4 及其自定义无线电样式一起工作。
Desired Output:
Gender : ( ) Male ( )Female
任何人都可以指出我正确的方向。
以下是我的做法
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<form class="form-horizontal" method="post">
<div class="row">
<div class="form-group row col-lg-6">
<label for="firstName" class="col-3 col-form-label">First Name</label>
<div class="col-9">
<input type="text" class="form-control" />
</div>
<div class="form-check row col-lg-6">
<label class="col-3 col-form-label">Gender</label>
<div class="col-9">
<label class="custom-control custom-radio">
<input name="cat" type="radio" class="custom-control-input" value="1">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Male</span>
</label>
<label class="custom-control custom-radio">
<input id="mixed0" name="cat" type="radio" class="custom-control-input" value="0">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Female</span>
</label>
</div>
</div>
</div>
</div>
</form>
</div>
JS fiddle : https://jsfiddle.net/w7odmrtr/2/
首先你 div
没有正确关闭,其次我只是用 form-group
替换了 form-check
class 现在它似乎工作了。
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<form class="form-horizontal" method="post">
<div class="row">
<div class="form-group row col-lg-6">
<label for="firstName" class="col-3 col-form-label">First Name</label>
<div class="col-9">
<input type="text" class="form-control" />
</div>
</div>
<div class="form-group row col-lg-6">
<label class="col-3 col-form-label">Gender</label>
<div class="col-9">
<label class="custom-control custom-radio">
<input name="cat" type="radio" class="custom-control-input" value="1">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Male</span>
</label>
<label class="custom-control custom-radio">
<input id="mixed0" name="cat" type="radio" class="custom-control-input" value="0">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Female</span>
</label>
</div>
</div>
</div>
</div>
</form>
</div>
我会这样做:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<form class="form-horizontal" method="post">
<div class="row">
<div class="form-group col-lg-12">
<label for="firstName" class="col-lg-3 col-form-label">First Name</label>
<div class="col-lg-9">
<input type="text" class="form-control">
</div>
</div>
<div class="form-group col-lg-12">
<label class="custom-control custom-radio"><span class="custom-control-description">Some Label</span></label>
<label class="custom-control custom-radio">
<input name="cat" type="radio" class="custom-control-input" value="1">
<span class="custom-control-indicator"></span>
<span class="custom-control-description" th:text="#{bool.true}">Yes</span>
</label>
<label class="custom-control custom-radio">
<input id="mixed0" name="cat" type="radio" class="custom-control-input" value="0">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">No</span>
</label>
</div>
</div>
</form>
</div>
我正在尝试 Bootstrap 4 表单,我想在其中内联带有标签的单选按钮。我让它与 bootstrap 3 一起工作,但我似乎无法与 bootstrap 4 及其自定义无线电样式一起工作。
Desired Output:
Gender : ( ) Male ( )Female
任何人都可以指出我正确的方向。 以下是我的做法
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<form class="form-horizontal" method="post">
<div class="row">
<div class="form-group row col-lg-6">
<label for="firstName" class="col-3 col-form-label">First Name</label>
<div class="col-9">
<input type="text" class="form-control" />
</div>
<div class="form-check row col-lg-6">
<label class="col-3 col-form-label">Gender</label>
<div class="col-9">
<label class="custom-control custom-radio">
<input name="cat" type="radio" class="custom-control-input" value="1">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Male</span>
</label>
<label class="custom-control custom-radio">
<input id="mixed0" name="cat" type="radio" class="custom-control-input" value="0">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Female</span>
</label>
</div>
</div>
</div>
</div>
</form>
</div>
JS fiddle : https://jsfiddle.net/w7odmrtr/2/
首先你 div
没有正确关闭,其次我只是用 form-group
替换了 form-check
class 现在它似乎工作了。
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<form class="form-horizontal" method="post">
<div class="row">
<div class="form-group row col-lg-6">
<label for="firstName" class="col-3 col-form-label">First Name</label>
<div class="col-9">
<input type="text" class="form-control" />
</div>
</div>
<div class="form-group row col-lg-6">
<label class="col-3 col-form-label">Gender</label>
<div class="col-9">
<label class="custom-control custom-radio">
<input name="cat" type="radio" class="custom-control-input" value="1">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Male</span>
</label>
<label class="custom-control custom-radio">
<input id="mixed0" name="cat" type="radio" class="custom-control-input" value="0">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Female</span>
</label>
</div>
</div>
</div>
</div>
</form>
</div>
我会这样做:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<form class="form-horizontal" method="post">
<div class="row">
<div class="form-group col-lg-12">
<label for="firstName" class="col-lg-3 col-form-label">First Name</label>
<div class="col-lg-9">
<input type="text" class="form-control">
</div>
</div>
<div class="form-group col-lg-12">
<label class="custom-control custom-radio"><span class="custom-control-description">Some Label</span></label>
<label class="custom-control custom-radio">
<input name="cat" type="radio" class="custom-control-input" value="1">
<span class="custom-control-indicator"></span>
<span class="custom-control-description" th:text="#{bool.true}">Yes</span>
</label>
<label class="custom-control custom-radio">
<input id="mixed0" name="cat" type="radio" class="custom-control-input" value="0">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">No</span>
</label>
</div>
</div>
</form>
</div>