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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
scss/_card.scss
View File

@ -190,9 +190,14 @@
} }
//
// Card set // 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 { @if $enable-flex {
@include media-breakpoint-up(sm) { @include media-breakpoint-up(sm) {
@ -200,11 +205,13 @@
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
margin-right: -$card-deck-margin; margin-right: -$card-deck-margin;
margin-bottom: $card-spacer-y; // Margin balancing
margin-left: -$card-deck-margin; margin-left: -$card-deck-margin;
.card { .card {
flex: 1 0 0; flex: 1 0 0;
margin-right: $card-deck-margin; margin-right: $card-deck-margin;
margin-bottom: 0; // Margin balancing
margin-left: $card-deck-margin; margin-left: $card-deck-margin;
} }
} }
@ -215,11 +222,13 @@
.card-deck { .card-deck {
display: table; display: table;
width: 100%; width: 100%;
margin-bottom: $card-spacer-y; // Margin balancing
table-layout: fixed; table-layout: fixed;
border-spacing: $space-between-cards 0; border-spacing: $space-between-cards 0;
.card { .card {
display: table-cell; display: table-cell;
margin-bottom: 0; // Margin balancing
vertical-align: top; vertical-align: top;
} }
} }