mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-19 11:51:23 +02:00
Code Issues Releases Wiki Activity

Simplify list-group borders in cards (#30808)

Browse Source
This commit is contained in:
Mark Otto
2020-05-14 10:48:46 -07:00
committed by XhmikosR
parent f4a7888af5
commit ac48bbe081
2 changed files with 21 additions and 6 deletions
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 {
@@ -83,12 +90,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 {

14
site/docs/4.5/components/card.md
View File

@@ -107,6 +107,20 @@ Create lists of content in a card with a flush list group.
{% endcapture %} {% endcapture %}
{% include example.html content=example %} {% include example.html content=example %}
{% capture 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>
{% endcapture %}
{% include example.html content=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.