diff options
| author | Brad Kent <[email protected]> | 2016-11-28 22:56:49 -0600 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2016-11-28 20:56:49 -0800 |
| commit | 8250bd1b2175fcab70401dcc987cee6054b25556 (patch) | |
| tree | a58dc3b67f940482d572500f65b50d45f75a6233 /docs/components | |
| parent | af937836d95ebf7bc100288bef7a7f99b637d7f9 (diff) | |
| download | bootstrap-8250bd1b2175fcab70401dcc987cee6054b25556.tar.xz bootstrap-8250bd1b2175fcab70401dcc987cee6054b25556.zip | |
Fix #20936 make inline checkbox/radio markup same as stacked (#20995)
* #20936 make inline checkbox/radio markup same as stacked
* tweak language and remove extra blank line in snippet
Diffstat (limited to 'docs/components')
| -rw-r--r-- | docs/components/forms.md | 53 |
1 files changed, 32 insertions, 21 deletions
diff --git a/docs/components/forms.md b/docs/components/forms.md index dd3e0027f..4cbf20412 100644 --- a/docs/components/forms.md +++ b/docs/components/forms.md @@ -152,8 +152,7 @@ Below is a complete list of the specific form controls supported by Bootstrap an <tr> <td class="text-nowrap"> {% markdown %} -`.form-check`<br> -`.form-check-inline` +`.form-check` {% endmarkdown %} </td> <td class="text-nowrap"> @@ -463,30 +462,42 @@ By default, any number of checkboxes and radios that are immediate sibling will ### Inline -Groups of checkboxes or radios that appear on the same horizontal row are similar to their stacked counterparts, but require different HTML and a single class. To switch from stacked to inline, drop the surrounding `<div>`, add `.form-check-inline` to the `<label>`, and keep the `.form-check-input` on the `<input>`. +Group checkboxes or radios on the same horizontal row by adding `.form-check-inline` to any `.form-check`. {% example html %} -<label class="form-check-inline"> - <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1"> 1 -</label> -<label class="form-check-inline"> - <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2"> 2 -</label> -<label class="form-check-inline"> - <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3"> 3 -</label> +<div class="form-check form-check-inline"> + <label class="form-check-label"> + <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1"> 1 + </label> +</div> +<div class="form-check form-check-inline"> + <label class="form-check-label"> + <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2"> 2 + </label> +</div> +<div class="form-check form-check-inline disabled"> + <label class="form-check-label"> + <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled> 3 + </label> +</div> {% endexample %} {% example html %} -<label class="form-check-inline"> - <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1 -</label> -<label class="form-check-inline"> - <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2 -</label> -<label class="form-check-inline"> - <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3 -</label> +<div class="form-check form-check-inline"> + <label class="form-check-label"> + <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1 + </label> +</div> +<div class="form-check form-check-inline"> + <label class="form-check-label"> + <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2 + </label> +</div> +<div class="form-check form-check-inline disabled"> + <label class="form-check-label"> + <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled> 3 + </label> +</div> {% endexample %} ### Without labels |