kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases Activity

Set vertical-align on .form-check-input (#29521)

Browse source 
This is a follow-up to #29322, specifically "allowing easy placement of
the `.form-check-input` in more places."  In my testing in Firefox and
Chrome, setting `vertical-align: top` removes the need to add
`float-left` to vertically align the checkbox and label text.  And doing
so does not visually affect examples which do apply `float: left` via
nesting in a `.form-check`.
This commit is contained in:
Jonathan Hefner 2019-11-24 13:15:35 -06:00 committed by Martijn Cuppens
parent 460ba061cb
commit 0caed940a5
2 changed files with 11 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
scss/forms/_form-check.scss
View file

@ -18,6 +18,7 @@
width: $form-check-input-width;
height: $form-check-input-width;
margin-top: ($line-height-base - $form-check-input-width) / 2; // line-height minus check height
vertical-align: top;
background-color: $form-check-input-bg;
border: $form-check-input-border;
appearance: none;

20
site/content/docs/4.3/components/list-group.md
View file

@ -205,23 +205,23 @@ Place Bootstrap's checkboxes and radios within list group items and customize as
{{< example >}}
<ul class="list-group">
<li class="list-group-item">
<input class="form-check-input float-left mr-2" type="checkbox" value="" aria-label="...">
<input class="form-check-input mr-1" type="checkbox" value="" aria-label="...">
Cras justo odio
</li>
<li class="list-group-item">
<input class="form-check-input float-left mr-2" type="checkbox" value="" aria-label="...">
<input class="form-check-input mr-1" type="checkbox" value="" aria-label="...">
Dapibus ac facilisis in
</li>
<li class="list-group-item">
<input class="form-check-input float-left mr-2" type="checkbox" value="" aria-label="...">
<input class="form-check-input mr-1" type="checkbox" value="" aria-label="...">
Morbi leo risus
</li>
<li class="list-group-item">
<input class="form-check-input float-left mr-2" type="checkbox" value="" aria-label="...">
<input class="form-check-input mr-1" type="checkbox" value="" aria-label="...">
Porta ac consectetur ac
</li>
<li class="list-group-item">
<input class="form-check-input float-left mr-2" type="checkbox" value="" aria-label="...">
<input class="form-check-input mr-1" type="checkbox" value="" aria-label="...">
Vestibulum at eros
</li>
</ul>
@ -232,23 +232,23 @@ And if you want `<label>`s as the `.list-group-item` for large hit areas, you ca
{{< example >}}
<div class="list-group">
<label class="list-group-item">
<input class="form-check-input float-left mr-2" type="checkbox" value="">
<input class="form-check-input mr-1" type="checkbox" value="">
Cras justo odio
</label>
<label class="list-group-item">
<input class="form-check-input float-left mr-2" type="checkbox" value="">
<input class="form-check-input mr-1" type="checkbox" value="">
Dapibus ac facilisis in
</label>
<label class="list-group-item">
<input class="form-check-input float-left mr-2" type="checkbox" value="">
<input class="form-check-input mr-1" type="checkbox" value="">
Morbi leo risus
</label>
<label class="list-group-item">
<input class="form-check-input float-left mr-2" type="checkbox" value="">
<input class="form-check-input mr-1" type="checkbox" value="">
Porta ac consectetur ac
</label>
<label class="list-group-item">
<input class="form-check-input float-left mr-2" type="checkbox" value="">
<input class="form-check-input mr-1" type="checkbox" value="">
Vestibulum at eros
</label>
</div>