rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-26 23:54:23 +01:00
Code Issues Actions Packages Releases Activity

Fix #20936 make inline checkbox/radio markup same as stacked (#20995)

Browse Source 
* #20936 make inline checkbox/radio markup same as stacked

* tweak language and remove extra blank line in snippet
This commit is contained in:
Brad Kent 2016-11-28 22:56:49 -06:00 committed by Mark Otto
parent af937836d9
commit 8250bd1b21
3 changed files with 36 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
docs/components/forms.md
View File

@ -152,8 +152,7 @@ Below is a complete list of the specific form controls supported by Bootstrap an
<tr> <tr>
<td class="text-nowrap"> <td class="text-nowrap">
{% markdown %} {% markdown %}
`.form-check`<br> `.form-check`
`.form-check-inline`
{% endmarkdown %} {% endmarkdown %}
</td> </td>
<td class="text-nowrap"> <td class="text-nowrap">
@ -463,30 +462,42 @@ By default, any number of checkboxes and radios that are immediate sibling will
### Inline ### 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 %} {% example html %}
<label class="form-check-inline"> <div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1"> 1 <label class="form-check-label">
</label> <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1"> 1
<label class="form-check-inline"> </label>
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2"> 2 </div>
</label> <div class="form-check form-check-inline">
<label class="form-check-inline"> <label class="form-check-label">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3"> 3 <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label> </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 %} {% endexample %}
{% example html %} {% example html %}
<label class="form-check-inline"> <div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1 <label class="form-check-label">
</label> <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
<label class="form-check-inline"> </label>
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2 </div>
</label> <div class="form-check form-check-inline">
<label class="form-check-inline"> <label class="form-check-label">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3 <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label> </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 %} {% endexample %}
### Without labels ### Without labels

14
scss/_forms.scss
View File

@ -235,21 +235,15 @@ select.form-control-lg {
// Radios and checkboxes on same line // Radios and checkboxes on same line
.form-check-inline { .form-check-inline {
position: relative;
display: inline-block; display: inline-block;
padding-left: 1.25rem;
margin-bottom: 0; // Override default `<label>` bottom margin .form-check-label {
vertical-align: middle; vertical-align: middle;
cursor: pointer; }
+ .form-check-inline { + .form-check-inline {
margin-left: .75rem; margin-left: .75rem;
} }
&.disabled {
color: $text-muted;
cursor: $cursor-disabled;
}
} }

1
scss/mixins/_forms.scss
View File

@ -9,7 +9,6 @@
.form-control-label, .form-control-label,
.col-form-label, .col-form-label,
.form-check-label, .form-check-label,
.form-check-inline,
.custom-control { .custom-control {
color: $color; color: $color;
} }