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

Question

我正在尝试使用 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%。

如有任何帮助，我们将不胜感激。

Answer 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%
    }
}

所以我发现 isotope/masonry 需要为 .item 元素设置宽度。

但是，我会尝试尽快更新关于垂直问题的解决方案..

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

Isotope grid breaks on browser resize

css

twitter-bootstrap

jquery-isotope

jquery-masonry

没有一列时正常

一栏时断