rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00
Code Issues Actions Packages Releases Activity

Document input group wrapping behavior and override via utility class

Browse Source 
Fixes #25409
This commit is contained in:
Mark Otto 2018-09-17 12:02:56 -07:00 committed by XhmikosR
parent 876e320364
commit 029f92c5e5
1 changed files with 14 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
site/docs/4.1/components/input-group.md
View File

@ -52,6 +52,20 @@ Place one add-on or button on either side of an input. You may also place one on
{% endcapture %} {% endcapture %}
{% include example.html content=example %} {% include example.html content=example %}
## Wrapping
Input groups wrap by default via `flex-wrap: wrap` in order to accommodate custom form field validation within an input group. You may disable this with `.flex-nowrap`.
{% capture example %}
<div class="input-group flex-nowrap">
<div class="input-group-prepend">
<span class="input-group-text" id="addon-wrapping">@</span>
</div>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="addon-wrapping">
</div>
{% endcapture %}
{% include example.html content=example %}
## Sizing ## Sizing
Add the relative form sizing classes to the `.input-group` itself and contents within will automatically resize—no need for repeating the form control size classes on each element. Add the relative form sizing classes to the `.input-group` itself and contents within will automatically resize—no need for repeating the form control size classes on each element.