root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 10 Packages Projects Releases Wiki Activity

Simplify list-group borders in cards (#30808)

This commit is contained in:
Mark Otto 2020-05-14 10:48:46 -07:00 committed by GitHub
parent 46d876314b
commit 12a6576f48
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
scss/_card.scss
View File

@ -33,6 +33,13 @@
@include border-bottom-radius($card-inner-border-radius); @include border-bottom-radius($card-inner-border-radius);
} }
} }
// Due to specificity of the above selector (`.card > .list-group`), we must
// use a child selector here to prevent double borders.
> .card-header + .list-group,
> .list-group + .card-footer {
border-top: 0;
}
} }
.card-body { .card-body {
@ -80,12 +87,6 @@
&:first-child { &:first-child {
@include border-radius($card-inner-border-radius $card-inner-border-radius 0 0); @include border-radius($card-inner-border-radius $card-inner-border-radius 0 0);
} }
+ .list-group {
.list-group-item:first-child {
border-top: 0;
}
}
} }
.card-footer { .card-footer {

13
site/content/docs/5.0/components/card.md
View File

@ -101,6 +101,19 @@ Create lists of content in a card with a flush list group.
</div> </div>
{{< /example >}} {{< /example >}}
{{< example >}}
<div class="card" style="width: 18rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
<div class="card-footer">
Card footer
</div>
</div>
{{< /example >}}
### Kitchen sink ### Kitchen sink
Mix and match multiple content types to create the card you need, or throw everything in there. Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card. Mix and match multiple content types to create the card you need, or throw everything in there. Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card.