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论坛上发现了这一点：

INT

对我有很大帮助。它不会影响边缘，镀铬和Firefox上的引导程序列行为。

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

1 个答案: