diff options
| author | Tobias <[email protected]> | 2024-05-30 07:49:28 +0200 |
|---|---|---|
| committer | GitHub <[email protected]> | 2024-05-30 07:49:28 +0200 |
| commit | 76ed1c6b14942834a02f2c05508d1a0d4b1687b6 (patch) | |
| tree | 05359fee1caa76985e430382e289fc0a8429f39d | |
| parent | 442421bcc21017abfa59b230542f464fbc757843 (diff) | |
| download | bootstrap-76ed1c6b14942834a02f2c05508d1a0d4b1687b6.tar.xz bootstrap-76ed1c6b14942834a02f2c05508d1a0d4b1687b6.zip | |
Fix `.btn-group-vertical` border radius with dropdown as first element (#40488)
Co-authored-by: Julien Déramond <[email protected]>
| -rw-r--r-- | scss/_button-group.scss | 7 | ||||
| -rw-r--r-- | site/content/docs/5.3/components/button-group.md | 4 |
2 files changed, 8 insertions, 3 deletions
diff --git a/scss/_button-group.scss b/scss/_button-group.scss index 55ae3f65d..dcd2a858e 100644 --- a/scss/_button-group.scss +++ b/scss/_button-group.scss @@ -135,7 +135,12 @@ @include border-bottom-radius(0); } - > .btn ~ .btn, + // The top radius should be 0 if the button is: + // - the "third or more" child + // - the second child and the previous element isn't `.btn-check` (making it the first child visually) + // - part of a btn-group which isn't the first child + > .btn:nth-child(n + 3), + > :not(.btn-check) + .btn, > .btn-group:not(:first-child) > .btn { @include border-top-radius(0); } diff --git a/site/content/docs/5.3/components/button-group.md b/site/content/docs/5.3/components/button-group.md index 9f26a9181..545467fec 100644 --- a/site/content/docs/5.3/components/button-group.md +++ b/site/content/docs/5.3/components/button-group.md @@ -195,8 +195,6 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli {{< example >}} <div class="btn-group-vertical" role="group" aria-label="Vertical button group"> - <button type="button" class="btn btn-primary">Button</button> - <button type="button" class="btn btn-primary">Button</button> <div class="btn-group" role="group"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown @@ -206,6 +204,8 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli <li><a class="dropdown-item" href="#">Dropdown link</a></li> </ul> </div> + <button type="button" class="btn btn-primary">Button</button> + <button type="button" class="btn btn-primary">Button</button> <div class="btn-group dropstart" role="group"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown |