Fix horizontal .list-group-flush.

twbs · Dec 19, 2023 · 2095f21 · 2095f21
1 parent dec0bb3
commit 2095f21
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 1 deletion.
diff --git a/scss/_list-group.scss b/scss/_list-group.scss
@@ -173,6 +173,27 @@
  }
 }
 
+// Horizontal flush list items
+//
+// Remove borders and border-radius to keep horizontal list group items edge-to-edge. Most
+// useful within other components (e.g., cards).
+@each $breakpoint in map-keys($grid-breakpoints) {
+ @include media-breakpoint-up($breakpoint) {
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+ .list-group-flush.list-group-horizontal#{$infix} {
+ @include border-radius(0);
+
+ > .list-group-item {
+ border-width: 0 var(--#{$prefix}list-group-border-width) 0 0;
+
+ &:last-child {
+ border-right-width: 0;
+ }
+ }
+ }
+ }
+}
 
 // scss-docs-start list-group-modifiers
 // List group contextual variants

diff --git a/scss/_reboot.scss b/scss/_reboot.scss
@@ -489,13 +489,23 @@ fieldset {
  border: 0; // 2
 }
 
+// 1. By using `float: left`, the legend will behave like a block element.
+// This way the border of a fieldset wraps around the legend if present.
+// 2. Fix wrapping bug.
+// See https://github.com/twbs/bootstrap/issues/29712
+
 legend {
+ float: left; // 1
  width: 100%;
  padding: 0;
  margin-bottom: $legend-margin-bottom;
  @include font-size($legend-font-size);
  font-weight: $legend-font-weight;
  line-height: inherit;
+
+ + * {
+ clear: left; // 2
+ }
 }
 
 // Fix height of inputs with a type of datetime-local, date, month, week, or time

diff --git a/site/content/docs/5.3/components/list-group.md b/site/content/docs/5.3/components/list-group.md
@@ -138,7 +138,7 @@ These work great with custom content as well.
 
 ## Horizontal
 
-Add `.list-group-horizontal` to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant `.list-group-horizontal-{sm|md|lg|xl|xxl}` to make a list group horizontal starting at that breakpoint's `min-width`. Currently **horizontal list groups cannot be combined with flush list groups.**
+Add `.list-group-horizontal` to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant `.list-group-horizontal-{sm|md|lg|xl|xxl}` to make a list group horizontal starting at that breakpoint's `min-width`.
 
 **ProTip:** Want equal-width list group items when horizontal? Add `.flex-fill` to each list group item.