Fix wrapping card decks (#22289)

fixes #22007 and fixes #21976 by changing margin strategy for card deck gutters
twbs · Mar 28, 2017 · bebdbe4 · bebdbe4
1 parent fe3acc0
commit bebdbe4
Showing 1 changed file with 4 additions and 6 deletions.
diff --git a/scss/_card.scss b/scss/_card.scss
@@ -190,17 +190,15 @@
   .card-deck {
     display: flex;
     flex-flow: row wrap;
+    margin-right: -$card-deck-margin;
+    margin-left: -$card-deck-margin;
 
     .card {
       display: flex;
       flex: 1 0 0;
       flex-direction: column;
-
-      // Selectively apply horizontal margins to cards to avoid doing the
-      // negative margin dance like our grid. This differs from the grid
-      // due to the use of margins as gutters instead of padding.
-      &:not(:first-child) { margin-left: $card-deck-margin; }
-      &:not(:last-child) { margin-right: $card-deck-margin; }
+      margin-right: $card-deck-margin;
+      margin-left: $card-deck-margin;
     }
   }
 }