Fix Chrome's rendering of .card-columns

Uses orphans/widows trick from @fran-worley at https://github.com/twbs/bootstrap/issues/20925#issuecomment-333492739.

Fixes #20925.

diff --git a/scss/_card.scss b/scss/_card.scss
index c4b9a725da133d3e580764678912b2221cf6f91a..7f9f1d1b7d3b740cc356f8d50d20ac404ac752a2 100644 (file)
--- a/scss/_card.scss
+++ b/scss/_card.scss
@@ -261,6 +261,8 @@
   @include media-breakpoint-up(sm) {
     column-count: $card-columns-count;
     column-gap: $card-columns-gap;
+    orphans: 1;
+    widows: 1;
 
     .card {
       display: inline-block; // Don't let them vertically span multiple columns