php - 砌体不能正确 float - Bootstrap

Question

场景

该网站是用 Bootstrap 构建的，有几个高度不同的 div(或列)。因此，我需要包括 Masonry 以使它们正确 float /对齐。

在下面的页面上，您可以看到 3 个构造不同的部分。第一个不是用 Masonry 制作的。这部分工作完美。除了如果其中一列有很多文本，它会错误地 float 。这发生在响应式 View 中。

第二个和第三个是用 Masonry build 的。我不知道我哪里错了，但在响应式 View 中它们都不能正常工作。实际上两者都是错误的，根本没有响应。

不知道从哪里开始。有任何想法吗？

Masonry 包含在 noconflict 中，因此它不会与任何 JS 冲突。

PHP

<div class="clearfix">
    <div class="container">
        <div class="row">
            <div class="col-md-12"><h1><!-- Info --></h1></div>
        </div>
        <div class="masonry-container">
            <div class="row">
                <div>
                    <div class="item col-xs-6 col-sm-6 col-md-3">
                        <!-- Info -->
                    </div>
                    <div class="item col-xs-6 col-sm-6 col-md-3">
                        <!-- Info -->
                    </div>
                    <div class="item col-xs-6 col-sm-6 col-md-3">
                        <!-- Info -->
                    </div>
                    <div class="item col-xs-6 col-sm-6 col-md-3">
                        <!-- Info -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

页脚中包含砌体:

<script src="<?php bloginfo('stylesheet_directory'); ?>/js/masonry.pkgd.min.js"></script>

<script>
jQuery.noConflict();
jQuery( document ).ready(function( $ ) {
 $('.masonry-container').imagesLoaded( function(){
    $('.masonry-container').masonry({
        itemSelector: '.item',
        isAnimated: true,
        isFitWidth: true
    });
 });

 $(window).resize(function() {
    $('.masonry-container').masonry({
        itemSelector: '.item',
        isAnimated: true
    }, 'reload');
 });
});
</script>

页面可以找到here .

Answer 1

原来其中一个 js 文件 有问题。使列淡入淡出动画的 javascript 干扰了 Masonry。

使用 .visible-xs-block 和 .visible-sm-block 解决了这个问题，因此列在同一行。