0
here에서 IOS 및 Mac 데스크톱에서 Safari를 지원한다고 나와 있습니다.부트 스트랩 3.3.7 - 그리드 시스템이 Safari 10에서 작동하지 않습니까?
하지만 왜 이것이 사파리에서 나옵니까?
<!-- 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>나는 주위를 둘러 보았다했다 있지만 아직 해결 찾을 수 없습니다 :
이
내 코드입니다. 어떤 아이디어?version 4으로 업그레이드하면 최악입니다. Chrome에서 무섭게 깨집니다!
Foundation은 어떨까요? 모든 브라우저에서 더 나은 그리드 시스템을 지원합니까? 당신은 크롬, 오페라와 파이어 폭스에 올바른 그리드 레이아웃을 볼 수 전체 페이지에 내 코드를 실행하는 데있어
참고.
감사합니다. 위의 부트 스트랩 그리드를 Foundation으로 어떻게 바꾸시겠습니까? 나는 재단에 처음 온 사람입니다. 나이가 들어서 부트 스트랩에 올라 섰으며 때로는 매우 실망 스럽습니다! – laukok
왜 단순한 격자 레이아웃이 Safari에서 실패할지 이해할 수 없습니다! – laukok