diff --git a/scss/_input-group.scss b/scss/_input-group.scss index cf4d4436fdb09a968f432cf7b9788729318480a6..cee6008a6dd8ec964f3feea557dd061038743486 100644 --- a/scss/_input-group.scss +++ b/scss/_input-group.scss @@ -82,11 +82,11 @@ } } - .btn + .btn, - .btn + .input-group-text, - .input-group-text + .input-group-text, - .input-group-text + .btn { - margin-left: -$input-border-width; + .input-group-text, + .btn { + &:not(:first-child) { + margin-left: -$input-border-width; + } } } @@ -179,6 +179,7 @@ .input-group > .input-group-append:not(:last-child) > .btn, .input-group > .input-group-append:not(:last-child) > .input-group-text, .input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle), +.input-group > .input-group-append:last-child > .dropdown-toggle:nth-last-child(n + 3), .input-group > .input-group-append:last-child > .input-group-text:not(:last-child) { @include border-right-radius(0); } diff --git a/site/docs/4.2/components/input-group.md b/site/docs/4.2/components/input-group.md index cdbfa794a69a5833befa2be69607e5ee7cd27120..c6928bbb60122e46497ce60e6a647d5602620217 100644 --- a/site/docs/4.2/components/input-group.md +++ b/site/docs/4.2/components/input-group.md @@ -211,17 +211,32 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve <input type="text" class="form-control" aria-label="Text input with dropdown button"> </div> +<div class="input-group mb-3"> + <input type="text" class="form-control" aria-label="Text input with dropdown button"> + <div class="input-group-append"> + <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button> + <div class="dropdown-menu dropdown-menu-right"> + <a class="dropdown-item" href="#">Action</a> + <a class="dropdown-item" href="#">Another action</a> + <a class="dropdown-item" href="#">Something else here</a> + <div role="separator" class="dropdown-divider"></div> + <a class="dropdown-item" href="#">Separated link</a> + </div> + </div> +</div> + <div class="input-group"> <input type="text" class="form-control" aria-label="Text input with dropdown button"> <div class="input-group-append"> <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button> - <div class="dropdown-menu"> + <div class="dropdown-menu dropdown-menu-right"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> + <button class="btn btn-outline-secondary" type="button">Button</button> </div> </div> {% endcapture %}