From 56a5b19cdb63e1e76478a628eab774b0c3e93f98 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 11 May 2016 22:14:05 -0700 Subject: [PATCH] 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. --- scss/_card.scss | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/scss/_card.scss b/scss/_card.scss index fd0280a9e9..a419d4d08d 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -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; } }