浏览器调整大小时同位素网格中断答案

【问题标题】：Isotope grid breaks on browser resize浏览器调整大小时同位素网格中断
【发布时间】：2015-04-30 05:43:11
【问题描述】：

我正在尝试使用 Twitter Bootstrap 和 Isotope 创建一个 3 列网格。但是，当我将浏览器的大小调整到足够窄以强制布局进入单列模式时，同位素无法留下大的垂直和水平空间。

没有一列时正常

一栏就坏了

如上图所示，垂直空间很大，而且第一个单元格没有扩展到 100% 宽度。

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：

var isotope = new Isotope('.masonry', {
  itemSelector: '.item',
  layoutMode: 'masonry',
  masonry: {
    columnWidth: '.item'
  }
});

isotope.layout();

当我已经在狭窄的视口中重新加载浏览器时，垂直间隙会变平，但第一个单元格仍然没有扩展到 100%。

任何帮助将不胜感激。

【问题讨论】：

我在这里遇到了完全相同的问题..您找到解决问题的方法了吗？
不。很高兴我并不孤单。

标签： css twitter-bootstrap jquery-isotope jquery-masonry

【解决方案1】：

所以，我发现定义如下 CSS 至少可以解决横向问题：

@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 元素设置宽度。

不过，我会尽快更新关于垂直问题的解决方案。

【讨论】：

将此代码添加到您的 codepen (codepen.io/anon/pen/YPgBjG) 时，我发现没有实际问题。好像就是这么简单:)
是的，这似乎工作得很好。您的解决方案给我留下了深刻的印象:-) 将对此进行更多测试并接受您的回答。我们可能应该在他们的 GitHub 页面上提出问题。
@adarshr 您是否有时间验证是否接受此答案？