Fixes #17911: Explicitly remove margin-bottom from cards in .card-deck

Here we're doing some margin swapping, so it looks a little funky. All this does is match the margin implementation and rendering across our table and flex versions of card decks.
This commit is contained in:
Mark Otto 2016-05-11 22:14:05 -07:00
parent de91c5e0be
commit 56a5b19cdb
1 changed files with 10 additions and 1 deletions

View File

@ -190,9 +190,14 @@
}
//
// Card set
//
// Heads up! We do some funky style resetting here for margins across our two
// variations (one flex, one table). Individual cards have margin-bottom by
// default, but they're ignored due to table styles. For a consistent design,
// we've done the same to the flex variation.
//
// Those changes are noted by `// Margin balancing`.
@if $enable-flex {
@include media-breakpoint-up(sm) {
@ -200,11 +205,13 @@
display: flex;
flex-flow: row wrap;
margin-right: -$card-deck-margin;
margin-bottom: $card-spacer-y; // Margin balancing
margin-left: -$card-deck-margin;
.card {
flex: 1 0 0;
margin-right: $card-deck-margin;
margin-bottom: 0; // Margin balancing
margin-left: $card-deck-margin;
}
}
@ -215,11 +222,13 @@
.card-deck {
display: table;
width: 100%;
margin-bottom: $card-spacer-y; // Margin balancing
table-layout: fixed;
border-spacing: $space-between-cards 0;
.card {
display: table-cell;
margin-bottom: 0; // Margin balancing
vertical-align: top;
}
}