使用Bootstrap 4开发模板遇Safari 8.x Flex布局响应问题求助

Hey there, I’ve run into this exact Safari 8 flex bug before—super frustrating when your responsive grid breaks on older browsers! Let’s break down why this happens and how to fix it.

Why This Happens #

Safari 8.x has partial, buggy support for CSS Flexbox, which Bootstrap 4 relies on for its grid system. Specifically, it often fails to properly handle flex-wrap: wrap at media query breakpoints. When your screen drops below 992px (the lg breakpoint), Bootstrap’s default styles should switch .col-lg-6 to 100% width and wrap, but Safari 8 ignores this behavior entirely.

Solutions to Try #

1. Force Flex Wrap and Correct Column Sizing for Safari 8

Add this targeted CSS to override Safari’s faulty Flex handling:

/* Target Safari 8 specifically */
@media screen and (-webkit-min-device-pixel-ratio:0) and (max-width: 991px) {
  .row {
    -webkit-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
  }
  .col-lg-6 {
    -webkit-flex-basis: 100% !important;
    flex-basis: 100% !important;
    max-width: 100% !important;
  }
}

The !important ensures these styles override Bootstrap’s default Flex rules in Safari. This forces columns to wrap and take full width when the screen is smaller than 992px.

2. Fall Back to Floated Layout (Bootstrap 3-Style)

If the Flex fix doesn’t work, you can revert to Bootstrap 3’s floating grid for Safari 8, which is far more reliable in older browsers:

/* Target Safari 8 */
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) { 
  @media {
    .row {
      display: block;
      margin-right: -15px;
      margin-left: -15px;
    }
    .col-lg-6 {
      float: left;
      width: 100%;
      padding-right: 15px;
      padding-left: 15px;
    }
    /* Reapply 50% width for lg screens */
    @media (min-width: 992px) {
      .col-lg-6 {
        width: 50%;
      }
    }
  }
}

This replaces the Flex layout with floats only for Safari 8, mimicking Bootstrap’s intended responsive behavior without relying on buggy Flex support.

3. Check for Custom Style Conflicts

Double-check your custom CSS to make sure you haven’t accidentally overridden Bootstrap’s grid styles. Common culprits include:

• Setting flex-wrap: nowrap on .row elements
• Adding fixed widths to .col-lg-6
• Overwriting media query styles for the lg breakpoint

Final Notes #

Safari 8 is pretty outdated, so if your project can afford to drop support for it, that’s a clean long-term solution. But if you need to keep supporting it, the fixes above should get your grid working as expected.

内容的提问来源于stack exchange，提问作者Le Thanh