Question

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

正常时不是一列

Normal

一列

时损坏

Broken

正如您在上图所示，有很大的垂直空间，第一个单元格也没有扩展到100％宽度。

Here's my Codepen.

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 个答案: