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

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

因此，我发现同位素/砌体需要将宽度设置为.item元素。

但是，我将尝试尽快更新有关垂直问题的解决方案。

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

问题描述

没有一列时正常

一根柱子坏了

1 个解决方案

解决方案1
4 已采纳 2015-04-24 16:01:36

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

问题描述

没有一列时正常

一根柱子坏了

1 个解决方案

解决方案1 4 已采纳 2015-04-24 16:01:36

解决方案1
4 已采纳 2015-04-24 16:01:36