From ec8c2519285a1c88d224739dc2f4b18b997a1e8b Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sat, 18 Mar 2017 16:30:12 -0700
Subject: [PATCH] fixes #21584
- revert back to display block for list items to prevent unwanted behaviors
- fixes a handful of other linked issues (see main thread)
- updates docs to include more utilities for the one example
---
docs/components/list-group.md | 8 ++++----
scss/_list-group.scss | 4 +---
2 files changed, 5 insertions(+), 7 deletions(-)
diff --git a/docs/components/list-group.md b/docs/components/list-group.md
index 4316516aec..f3b5b7c892 100644
--- a/docs/components/list-group.md
+++ b/docs/components/list-group.md
@@ -116,19 +116,19 @@ Contextual classes also work with `.list-group-item-action`. Note the addition o
## With badges
-Add badges to any list group item to show unread counts, activity, and more with the help of some utilities. Note the [`justify-content-between` utility class]({{ site.baseurl }}/layout/grid/#horizontal-alignment) and the badge's placement.
+Add badges to any list group item to show unread counts, activity, and more with the help of some [utilities]({{ site.baseurl }}/utilities/flexbox/).
{% example html %}
<ul class="list-group">
- <li class="list-group-item justify-content-between">
+ <li class="list-group-item d-flex justify-content-between align-items-center">
Cras justo odio
<span class="badge badge-default badge-pill">14</span>
</li>
- <li class="list-group-item justify-content-between">
+ <li class="list-group-item d-flex justify-content-between align-items-center">
Dapibus ac facilisis in
<span class="badge badge-default badge-pill">2</span>
</li>
- <li class="list-group-item justify-content-between">
+ <li class="list-group-item d-flex justify-content-between align-items-center">
Morbi leo risus
<span class="badge badge-default badge-pill">1</span>
</li>
diff --git a/scss/_list-group.scss b/scss/_list-group.scss
index bb8a8d1031..c4b5e2f926 100644
--- a/scss/_list-group.scss
+++ b/scss/_list-group.scss
@@ -42,9 +42,7 @@
.list-group-item {
position: relative;
- display: flex;
- flex-flow: row wrap;
- align-items: center;
+ display: block;
padding: $list-group-item-padding-y $list-group-item-padding-x;
// Place the border on the list items and negative margin up for better styling
margin-bottom: -$list-group-border-width;
--
GitLab