问题描述
我正在尝试使用Twitter Bootstrap和同位素创建3列网格.但是，当我将浏览器的大小调整为足够窄以强制将布局设置为单列模式时，同位素将无法保留较大的垂直和水平空间.
I am trying to create a 3 column grid using Twitter Bootstrap and Isotope. However, when I resize the browser to be narrow enough to force the layout into a single column mode, isotope fails leaving large vertical and horizontal spaces.
如上图所示，垂直空间很大，而且第一个单元格的宽度也不扩展到100％.
As you can see in the above image, there are large vertical spaces and also the first cell doesn't expand to 100% width.
HTML:
<html lang="en" class="">
<head>
<meta charset="utf-8" />
<title>isotope</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<div class="masonry row">
<div class="item col-lg-4 col-md-6">
<div class="cell">
<h3>
<a href="#">1. One</a>
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor metus et porta facilisis. </p>
<p>Aenean congue lorem accumsan erat tempor, eu tempus ex tristique.</p>
<small class="text-muted">27 Nov 2014</small>
<div class="pull-right">
<a class="btn btn-primary btn-xs" href="#">auctor</a>
</div>
</div>
</div>
<div class="item col-lg-4 col-md-6">
<div class="cell">
<h3>
<a href="#">2. Two</a>
</h3>
<p>Duis mattis risus quis purus gravida lobortis. Donec pharetra, mi in consectetur ornare, elit felis luctus nibh, vitae elementum dui felis blandit neque. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum venenatis massa, vitae varius metus commodo sed. Vivamus et ante at nisi scelerisque consectetur. Praesent semper lacus vitae nibh venenatis mollis a eu nunc. Donec id erat lacus.</p>
<small class="text-muted">03 Nov 2007</small>
<div class="pull-right">
<a class="btn btn-primary btn-xs" href="#">elit</a>
</div>
</div>
</div>
<div class="item col-lg-4 col-md-6">
<div class="cell">
<h3>
<a href="#">3. Three</a>
</h3>
<p>Duis mattis risus quis purus gravida lobortis. Donec pharetra, mi in consectetur ornare, elit felis luctus nibh, vitae elementum dui felis blandit neque. Proin egestas congue dui id porta. Donec luctus ex sit amet dui rhoncus, quis dignissim odio accumsan.</p>
<small class="text-muted">19 Sep 2006</small>
<div class="pull-right">
<a class="btn btn-primary btn-xs" href="#">venenatis</a>
</div>
</div>
</div>
<div class="item col-lg-4 col-md-6">
<div class="cell">
<h3>
<a href="#">4. Four</a>
</h3>
<p>Integer commodo pharetra lorem vel sollicitudin. Nunc in euismod magna. Nam varius turpis luctus consequat bibendum. Proin vehicula cursus dui. Duis ut nunc et dui volutpat mattis id sed ex. </p>
<small class="text-muted">19 Sep 2006</small>
<div class="pull-right">
<a class="btn btn-primary btn-xs" href="#">luctus</a>
</div>
</div>
</div>
</div>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.1.1/isotope.pkgd.min.js"></script>
</body>
</html>
CSS:
.masonry {
padding: 0;
margin-left: -15px;
margin-right: -15px;
}
.item {
margin-right: -1px;
margin-bottom: 20px;
padding: 0 10px;
}
.cell {
padding: 15px;
background-color: #FFFFFF;
box-shadow: 0 10px 6px -6px #777;
border: 1px solid #F6F6F6;
}
JavaScript:
JavaScript:
var isotope = new Isotope('.masonry', {
itemSelector: '.item',
layoutMode: 'masonry',
masonry: {
columnWidth: '.item'
}
});
isotope.layout();
当我已经在狭窄的视口中重新加载浏览器时，垂直间隙均匀，但第一个单元格仍未扩展为100％.
When I reload the browser when already in a narrow viewport, the vertical gaps even out but the first cell still doesn't expand to be 100%.
任何帮助将不胜感激.
推荐答案
因此，我发现定义以下CSS至少可以解决水平问题:
So, I found that defining the following CSS at least solves the horizontal issue:
@media (max-width: 991.9999px) {
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
width: 100%
}
}
所以我发现同位素/砌体需要将宽度设置为 .item 元素.
So what I found out is that isotope/masonry needs to have a width set to the .item element.
但是，我将尝试尽快更新有关纵向问题的解决方案.
However, I will try to update my solution regarding the vertical issue as soon as possible..
这篇关于同位素网格在浏览器调整大小时中断的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！