diff options
| author | Mark Otto <[email protected]> | 2016-02-07 23:41:35 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2016-02-07 23:41:35 -0800 |
| commit | 23d47122ef2d75e4261ec9b8ba23034820e34bed (patch) | |
| tree | be415dfbde511af471f7868e3880db9987c7f160 | |
| parent | 48df6e3b722b0fc3934afc3334667b696cad978f (diff) | |
| parent | 54fdb45fa507ca0c3ddafdf1434df61abd82ed8a (diff) | |
| download | bootstrap-23d47122ef2d75e4261ec9b8ba23034820e34bed.tar.xz bootstrap-23d47122ef2d75e4261ec9b8ba23034820e34bed.zip | |
Merge branch 'multiple-input-group-addon' of https://github.com/vicary/bootstrap into vicary-multiple-input-group-addon
| -rw-r--r-- | docs/components/input-group.md | 2 | ||||
| -rw-r--r-- | scss/_input-group.scss | 38 |
2 files changed, 20 insertions, 20 deletions
diff --git a/docs/components/input-group.md b/docs/components/input-group.md index 78ad26e27..841ebb2d5 100644 --- a/docs/components/input-group.md +++ b/docs/components/input-group.md @@ -13,7 +13,7 @@ Easily extend form controls by adding text, buttons, or button groups on either ## Basic example -Place one add-on or button on either side of an input. You may also place one on both sides of an input. **We do not support multiple add-ons on a single side, nor multiple form-controls in a single input group.** +Place one add-on or button on either side of an input. You may also place one on both sides of an input. **We do not support multiple form-controls in a single input group.** {% example html %} <div class="input-group"> diff --git a/scss/_input-group.scss b/scss/_input-group.scss index fd00ddb3f..1c651d1eb 100644 --- a/scss/_input-group.scss +++ b/scss/_input-group.scss @@ -4,6 +4,7 @@ .input-group { position: relative; + width: 100%; @if $enable-flex { display: flex; @@ -121,32 +122,31 @@ // Reset rounded corners // -.input-group .form-control:first-child, -.input-group-addon:first-child, -.input-group-btn:first-child > .btn, -.input-group-btn:first-child > .btn-group > .btn, -.input-group-btn:first-child > .dropdown-toggle, -.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle), -.input-group-btn:last-child > .btn-group:not(:last-child) > .btn { +.input-group .form-control:not(:last-child), +.input-group-addon:not(:last-child), +.input-group-btn:not(:last-child) > .btn, +.input-group-btn:not(:last-child) > .btn-group > .btn, +.input-group-btn:not(:last-child) > .dropdown-toggle, +.input-group-btn:not(:first-child) > .btn:not(:last-child):not(.dropdown-toggle), +.input-group-btn:not(:first-child) > .btn-group:not(:last-child) > .btn { @include border-right-radius(0); } -.input-group-addon:first-child { +.input-group-addon:not(:last-child) { border-right: 0; } -.input-group .form-control:last-child, -.input-group-addon:last-child, -.input-group-btn:last-child > .btn, -.input-group-btn:last-child > .btn-group > .btn, -.input-group-btn:last-child > .dropdown-toggle, -.input-group-btn:first-child > .btn:not(:first-child), -.input-group-btn:first-child > .btn-group:not(:first-child) > .btn { +.input-group .form-control:not(:first-child), +.input-group-addon:not(:first-child), +.input-group-btn:not(:first-child) > .btn, +.input-group-btn:not(:first-child) > .btn-group > .btn, +.input-group-btn:not(:first-child) > .dropdown-toggle, +.input-group-btn:not(:last-child) > .btn:not(:first-child), +.input-group-btn:not(:last-child) > .btn-group:not(:first-child) > .btn { @include border-left-radius(0); } -.input-group-addon:last-child { +.form-control + .input-group-addon:not(:first-child) { border-left: 0; } - // // Button input groups // @@ -172,13 +172,13 @@ } // Negative margin to only have a single, shared border between the two - &:first-child { + &:not(:last-child) { > .btn, > .btn-group { margin-right: (-$input-btn-border-width); } } - &:last-child { + &:not(:first-child) { > .btn, > .btn-group { z-index: 2; |
