仅在 Safari 上的 Bootstrap 4 网格问题答案

【问题标题】：Bootstrap 4 grid issue only on Safari仅在 Safari 上的 Bootstrap 4 网格问题
【发布时间】：2018-03-13 07:12:55
【问题描述】：

我使用 Bootstrap 4 制作了一个完整的网站。现在我注意到，如果一行中的列数等于 12，则每列都从新行开始，而不是换行。当列数较少（如 10）时，没有问题。这看起来像一个 flexbug#11，但是当我尝试将边框设置为 1px 或将 flex-basis 设置为列时，问题仍然存在。

当我为 col-6 设置 49.9% 而不是 50% 的较低 flex-basis 时，问题就消失了，但我认为这不是解决此问题的正确方法，因为这不适用于所有部分。

您还有其他方法可以修复此错误吗？您需要我提供更多信息吗？感谢您的帮助！

标题示例：

ul li {
  display: inline-block;
 }

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-3">
      <div class="ccfw-site-logo">
        <a href="/" class="custom-logo-link" rel="home">
          <img src="/wp-content/uploads/2017/09/logo.png" srcset="/wp-content/uploads/2017/10/logo@2x.png 2x" alt="etrose logo" />
        </a>
      </div>
    </div>
    <div class="col-9">
      <div class="ccfw-primary-nav clearfix">
        <ul>
        <li><a href="/"><span>Home</span></a></li>
          <li><a href="#onas"><span>About us</span></a></li>
          <li><a href="#wartosci"><span>Our vision</span></a></li>
          <li><a href="/uslugi"><span>Services</span></a></li>
          <li><a href="/praca"><span>Job offers</span></a></li>
          <li><a href="/kontakt"><span>Contact</span></a></li>
        </ul>
      </div>
    </div>
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

以及来自 Chrome 和 Safari 的屏幕截图：

【问题讨论】：

很不清楚你问的是什么。提供一个工作代码 sn-p 重现该问题，否则没有人可以给出正确的答案。
如果你覆盖 Bootstrap，请提供一些代码和专业
我使用的是原始引导样式，我没有覆盖。这是一个带有引导列的简单网格。
问题在于您的徽标大小。它是响应式图像吗？尝试减小它的宽度，它应该可以解决问题。
但不仅仅是标题的问题。此问题存在于列数等于 12 的所有部分中。标题只是示例。徽标不会产生此问题，我尝试减小宽度但没有成功。 imgur.com/a/quQEV

标签： twitter-bootstrap css flexbox bootstrap-4

【解决方案1】：

将 css 旧代码替换为此代码

.ccfw-site-logo a {
line-height: normal !important;
}

【讨论】：

此更改无法解决 Safari 上的列换行问题。
.ccfw-site-logo a { line-height: unset !important; } 删除并使用 .ccfw-site-logo a { line-height: normal !important; }
就像我之前写的那样——这个改变并没有解决我的问题。徽标在这里不是问题。这个问题出现在所有 12 列的部分 - 不仅在标题中，所以 logo 在这里没有错。

【解决方案2】：

可能与此有关：Bootstrap 4 Safari on Mac Grid issue

问题似乎是 safari 如何处理 .row:after, .row:before{display:table;} 导致.row 内的.cols 换行。

【讨论】：