从这里的文档中说，它支持 IOS 和 Mac 桌面上的 Safari。
但为什么这是我在我的 Safari 上得到的呢？
这是我的代码：
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style type="text/css">
.grid-item {
display: block;
margin: 0 5px;
border: 1px solid red;
height:100%;
}
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
padding-left: 0;
padding-right: 0;
}
/* Equal image height */
/* http://stackoverflow.com/questions/42157249/css3-flex-stretches-the-image-instead-of-centering-it */
/* Only apply to large, medium and small screens */
/* https://scotch.io/tutorials/default-sizes-for-twitter-bootstraps-media-queries */
/* Small Devices, Tablets */
/* Medium Devices, Desktops */
@media only screen and (min-width : 768px),
@media only screen and (min-width : 992px) {
.eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}
}
.eq-height > [class*='col-'] {
display: flex;
flex-direction: column;
}
.eq-height > [class*='col-'] > [class*='col-'] {
height:100%;
}
/* Hide actual image but use inline cover image */
a.grid-item img {
opacity:0
}
a.grid-item {
background-size:cover
}
/* Gaps between items/ tiles */
.col-sm-3 .col-sm-12,
.col-sm-6 .col-sm-12,
.col-sm-3 .col-sm-12 + .col-sm-12 {
margin-top:10px;
}
/* Change container size */
.container {
width: 100%;
max-width: 1400px;
min-width: 320px;
margin: 0 auto;
}
@media only screen and (max-width: 1420px) {
.container {
padding: 0 20px;
}
}
</style>
<div class="container">
<div class="row eq-height">
<div class="col-sm-3">
<div class="col-sm-12"><a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x1200')"> <img class="img-responsive" src="http://placehold.it/800x1240" alt=""> </a>
</div>
</div>
<div class="col-sm-6">
<div class="col-sm-12"> <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x603" alt=""> </a>
</div>
</div>
<div class="col-sm-3">
<div class="col-sm-12"> <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a>
</div>
<div class="col-sm-12"> <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a>
</div>
</div>
</div>
<div class="row eq-height">
<div class="col-sm-3">
<div class="col-sm-12"> <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a>
</div>
<div class="col-sm-12"> <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a>
</div>
</div>
<div class="col-sm-3">
<div class="col-sm-12"><a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x900')"> <img class="img-responsive" src="http://placekitten.com/g/800/1200" alt=""> </a>
</div>
</div>
<div class="col-sm-6">
<div class="col-sm-12">
<a href="#" class="grid-item">
<video width="100%" height="100%" autoplay muted controls loop class="clip-polygon">
<source src="big-buck-bunny_trailer.webm" type="video/webm">
</video>
</a>
</div>
</div>
</div>
<div class="row eq-height">
<div class="col-sm-6">
<div class="col-sm-12"> <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a>
</div>
</div>
<div class="col-sm-3">
<div class="col-sm-12"> <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a>
</div>
<div class="col-sm-12"> <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a>
</div>
</div>
<div class="col-sm-3">
<div class="col-sm-12"><a href="#" class="grid-item" style="background-image:url('http://placehold.it/600x1000')"> <img class="img-responsive" src="http://placehold.it/800x1200" alt=""> </a>
</div>
</div>
</div>
</div>我环顾四周，但还没有找到任何修复方法。有任何想法吗？
如果我将它升级到第 4 版，那就更糟糕了——它在 Chrome 上崩溃得可怕！
Foundation呢？它对所有浏览器都有更好的网格系统支持吗？
请注意，您必须在整页上运行我的代码才能在 Chrome、Opera 和 Firefox 上看到正确的网格布局。