_button-group.scss in bootstrap-4.2.1

- old
+ new

@@ -7,11 +7,11 @@
   display: inline-flex;
   vertical-align: middle; // match .btn alignment given font-size hack above
 
   > .btn {
     position: relative;
-    flex: 0 1 auto;
+    flex: 1 1 auto;
 
     // Bring the hover, focused, and "active" buttons to the front to overlay
     // the borders properly
     @include hover {
       z-index: 1;
@@ -20,18 +20,10 @@
     &:active,
     &.active {
       z-index: 1;
     }
   }
-
-  // Prevent double borders when buttons are next to each other
-  .btn + .btn,
-  .btn + .btn-group,
-  .btn-group + .btn,
-  .btn-group + .btn-group {
-    margin-left: -$btn-border-width;
-  }
 }
 
 // Optional: Group multiple button groups together for a toolbar
 .btn-toolbar {
   display: flex;
@@ -42,12 +34,14 @@
     width: auto;
   }
 }
 
 .btn-group {
-  > .btn:first-child {
-    margin-left: 0;
+  // Prevent double borders when buttons are next to each other
+  > .btn:not(:first-child),
+  > .btn-group:not(:first-child) {
+    margin-left: -$btn-border-width;
   }
 
   // Reset rounded corners
   > .btn:not(:last-child):not(.dropdown-toggle),
   > .btn-group:not(:last-child) > .btn {
@@ -117,20 +111,17 @@
 .btn-group-vertical {
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
 
-  .btn,
-  .btn-group {
+  > .btn,
+  > .btn-group {
     width: 100%;
   }
 
-  > .btn + .btn,
-  > .btn + .btn-group,
-  > .btn-group + .btn,
-  > .btn-group + .btn-group {
+  > .btn:not(:first-child),
+  > .btn-group:not(:first-child) {
     margin-top: -$btn-border-width;
-    margin-left: 0;
   }
 
   // Reset rounded corners
   > .btn:not(:last-child):not(.dropdown-toggle),
   > .btn-group:not(:last-child) > .btn {