如何在 Safari 上正确显示引导列？

Question

我有一个包含六个英雄图片的登录页面。我将它设置为每行显示三张图像，分两行。这适用于 Chrome、Firefox、IE、Opera，但不适用于 Safari (10.1)。第一行没有整齐的行，而是有两个图像，第二个三个，第三个。这是我的 erb 文件：

<section class="grouping">
    <div class="wrapper grouping">
        <div class="intro-content grouping row">
            <% flash.each do |key, value| %>
                <div class="alert alert-<%= key %>" role="alert">
                    <%= value %>
                </div>
            <% end %>
            <div class="landing-image-container col-xs-12 col-sm-4">
                <%= link_to image_tag("news.jpg"), articles_path, class: 'image-link' %>
                <h4 class="landing-headings text-centered"><%= link_to "News", articles_path, class: 'landing-link' %></h4>
            </div>
            <div class="landing-image-container col-xs-12 col-sm-4">
                <%= link_to image_tag("Our People.JPG"), support_path, class: 'image-link' %>
                <h4 class="landing-headings text-centered"><%= link_to "Peer Support", support_path, class: 'landing-link' %></h4>
            </div>
            <div class="landing-image-container col-xs-12 col-sm-4">
                <%= link_to image_tag("training.jpg"), training_path, class: 'image-link' %>
                <h4 class="landing-headings text-centered"><%= link_to "Training", training_path, class: 'landing-link' %></h4>
            </div>
            <div class="landing-image-container col-xs-12 col-sm-4">
                <%= link_to image_tag("calendar.jpg"), calendar_path, class: 'image-link' %>
                <h4 class="landing-headings text-centered"><%= link_to "Calendar", calendar_path, class: 'landing-link' %></h4>
            </div>
            <div class="landing-image-container col-xs-12 col-sm-4">
                <%= link_to image_tag("about.jpg"), resources_path, class: 'image-link' %>
                <h4 class="landing-headings text-centered"><%= link_to "Trans Resources", resources_path, class: 'landing-link' %></h4>
            </div>
            <div class="landing-image-container col-xs-12 col-sm-4">
                <%= link_to image_tag("Get Involved.JPG", id: 'involved-image'), involved_path, class: 'image-link' %>
                <h4 class="landing-headings text-centered"><%= link_to "Get Involved", involved_path, class: 'landing-link' %></h4>
            </div>
        </div>
    </div>
</section>

我知道 Bootstrap 的规范说你应该在 .container 中包装一行，我已经用 .container 和 .container-fluid 尝试过这个设置，除了左右一些轻微的填充外，没有任何变化。.grouping 类是一个 clearfix hack：

.grouping:before,
.grouping:after {
  content: " ";
  display: table; 
}
.grouping:after {
  clear: both; 
}

这是 .wrapper 和 .intro-content 的 css：

.wrapper {
  width:100%;
  margin: 9em auto 0;
  padding-bottom: 9em;
  box-shadow: 0 8px 1em rgba(0, 0, 0, 0.1);
}

.intro-content  {
  margin: 4em auto;
  max-width: 1100px;
  width: 90%;
}

我已经把这些设置搞得一团糟，将所有填充和边距减少到 0 之类的东西，但问题仍然存在。谷歌搜索提供了一些hacky解决方案，但没有一个奏效。

Answer 1

在 GitHub 论坛之一上找到了这个：

.row:before, .row:after {
    display: inline-block;
}

帮了我很多。
它不会影响 edge、chrome 和 Firefox 上的引导列行为。