diff options
| author | Jonathan Hefner <[email protected]> | 2019-11-24 13:15:35 -0600 |
|---|---|---|
| committer | Martijn Cuppens <[email protected]> | 2019-11-24 20:15:35 +0100 |
| commit | 0caed940a578cb920a750dc0ce287c7d71e59a3e (patch) | |
| tree | 24039695d57f8bd4de00dfc91555c5fde40cccac | |
| parent | 460ba061cb470df7aca18b32854079a0caf335dd (diff) | |
| download | bootstrap-0caed940a578cb920a750dc0ce287c7d71e59a3e.tar.xz bootstrap-0caed940a578cb920a750dc0ce287c7d71e59a3e.zip | |
Set vertical-align on .form-check-input (#29521)
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`.
| -rw-r--r-- | scss/forms/_form-check.scss | 1 | ||||
| -rw-r--r-- | site/content/docs/4.3/components/list-group.md | 20 |
2 files changed, 11 insertions, 10 deletions
diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss index d3aaf058b..c4837f83b 100644 --- a/scss/forms/_form-check.scss +++ b/scss/forms/_form-check.scss @@ -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; diff --git a/site/content/docs/4.3/components/list-group.md b/site/content/docs/4.3/components/list-group.md index 2599641ea..a9bb3acd2 100644 --- a/site/content/docs/4.3/components/list-group.md +++ b/site/content/docs/4.3/components/list-group.md @@ -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> |