Question

情景

该站点使用Bootstrap构建，并且具有多个高度变化的div（或列）。因此，我需要包括砌体，以使它们正确浮动/对齐。

在下面的页面上，您可以看到3个不同的部分。第一个不是用砌体制造的。而这部分工作完美。除非其中一列有很多文本，否则它会出错。这发生在响应式视图中。

第二个和第三个是用砌体建造的。我无法弄清楚我错在哪里，但它们都没有在响应视图中正常工作。实际上两者都是非常错误的，根本没有回应。

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

砌体包含在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-files 出现了问题。通过动画干扰砌体使得列淡入和淡出的javascript。

问题已使用.visible-xs-block和.visible-sm-block解决，因此列位于同一行。

砌体没有正确浮动 - Bootstrap

1 个答案: