diff --git a/docs/components/input-group.md b/docs/components/input-group.md index 78ad26e27a..841ebb2d5f 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 %}
diff --git a/scss/_input-group.scss b/scss/_input-group.scss index e6681ebdea..e068ffa3f1 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; @@ -118,28 +119,26 @@ // 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 { - 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 { +.input-group .form-control:not(:first-child), +.input-group-addon:not(:first-child) { border-left: 0; } @@ -169,17 +168,11 @@ } // Negative margin to only have a single, shared border between the two - &:first-child { - > .btn, - > .btn-group { - margin-right: (-$input-btn-border-width); - } - } - &:last-child { + &:not(:first-child) { > .btn, > .btn-group { z-index: 2; - margin-left: (-$input-btn-border-width); + margin-left: (-$input-btn-border-width) * 2; // Because specificity @include hover-focus-active { z-index: 3;