Safari Bootstrap 网格不起作用

如果你在使用 Safari 浏览器，而且使用 Bootstrap 网格系统的时候遇到了问题，那么可能是因为 Safari 不支持某些 CSS 属性，导致网格系统不起作用。在这篇文章中，我们将会讨论如何解决这个问题。

问题描述

当你在 Safari 中使用 Bootstrap 网格系统时，你可能会遇到以下的问题：

• 网格样式失效，例如某些列没有正确对齐；
• 响应式布局失效，例如某些列没有在可视区域正常显示；
• 滚动条覆盖了网格系统，导致网格系统无法正常显示。

这些问题通常都是由于 Safari 不支持某些 CSS 属性所导致的。

解决方案

解决这个问题的方法是修改 CSS 样式，使其适应 Safari 浏览器。具体的修改方法如下：

1. 对于网格样式失效的问题：

你可以添加以下的 CSS 样式：

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

这个样式可以清除浮动，并使网格系统正常对齐。

2. 对于响应式布局失效的问题：

你可以添加以下的 CSS 样式：

@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx) {
    .col-xs-6 {
        width: 50%;
    }
}

这个样式可以使 col-xs-6 类正常工作。

3. 对于滚动条覆盖的问题：

你可以添加以下的 CSS 样式：

body {
    padding-right: 0 !important;
}

这个样式可以修复 Safari 中滚动条覆盖网格系统的问题。

结论

在 Safari 中使用 Bootstrap 网格系统时，可能会遇到一些问题。但是，通过适当地修改 CSS 样式，我们可以解决这些问题，并使网格系统正常工作。