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

没有一列时正常

正常

一根柱子坏了

破碎

如上图所示,垂直空间很大,第一个单元格的宽度也不会扩展到100%。

这是我的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%。

任何帮助将不胜感激。

#1楼 票数:4 已采纳

因此,我发现定义以下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元素。

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

  ask by adarshr translate from so

未解决问题?本站智能推荐:

1回复

同位素+调整大小+图像

您好,助手们:)我已经实现了一个单一的wordpress页面,该页面显示了砌体流体网格中的图像,但是在用HTML5调用视频时遇到了一个问题(仅带有标签:)。 问题是图像在宽度为50%时可以完美地工作; 高度:自动; 并且仅当您调整屏幕大小时,视频才加载到中,但不适合砌体布局(它与其他图像重
1回复

同位素砌体意外行为

我为以下问题困扰了很多小时,有人可以帮我解决这个问题吗? 这是我的新视差网站的一小部分: http://bit.ly/1mA3wiq 当您单击“阅读更多”时,所选博客项目应展开。 其他博客项目应该围绕它。 (砌体效应)(同位素) 我的问题 当您单击“博客1”处的
3回复

jQuery Masonry /同位素和流体图像:窗口大小调整时的瞬时重叠

我注意到当使用jQuery Isotope或Masonry与流畅/响应式网站时,元素会在浏览器窗口调整大小时暂时重叠。 请参阅下面的图片,这是此演示的截图。 您还可以在Isotope 网站上看到这种情况。 有什么办法可以避免这种重叠吗?
1回复

同位素响应在大屏幕上表现异常

我已将同位素添加到反应灵敏的投资组合网站中,并且正在做一些奇怪的事情。 我希望它是3列,除非我的分辨率是980px,否则我希望它只是一个。 事情是在非常高分辨率的情况下(超过2000像素),我得到的只是一列,但如果它们的宽度为3(33.333%),则宽度相同,所以这不是一件事。 我无法确定
3回复

同位素砌体-显示内容错误

我在砌体布局方面遇到问题-我无法正确地将64%和32%的列装入一行。 jsfiddle代码: http : //jsfiddle.net/h6ammhbo/ 这是我的砌体代码: 和布局: 我的CSS:对于大型商品: .article_60{ width: 64% }对
2回复

如何去除同位素砌体的顶部/底部边缘

我正在使用同位素砌体画廊,但发现很难去除行之间的顶部/底部间隙(见图) 我该怎么办? 我使用的代码基于以下内容: http : //simbyone.com/animated-masonry-gallery-with-filters/ 如前所述,我直接使用上面那个 url 中的代码,包括
2回复

同位素和图像加载的布局未填满整个宽度

我正在将同位素和图像加载到创建全宽网格中,该网格具有不同的高度元素(在本示例中,我将它们保持在相同的高度) 。 但是我在网格填充整个宽度时遇到了问题。 即使百分比加起来,他们也不排队,我也不知道为什么。 我正在努力实现以下目标: | 50%| 30%| 20%| 但是
1回复

如何在同位素中使用动态容器?

在Web应用程序的不同部分上重复使用同位素容器的情况下,我需要调整容器的大小。 但是,在为小布局添加和删除CSS类之后,该容器不再占用全部空间。 参见JSFiddle: http : //jsfiddle.net/mulderp/ptLzx/5/ 这将按预期调整容器的大小。