Question

我已就该主题进行了几个小时的研究，但我还没有找到我想要的东西。我正在用WordPress构建一个投资组合网站，我想到的其中一个布局是这样的， portfolio layout 我在Bootstrap中使用重叠行成功制作的。我希望在视口为＆lt; 768px使得行不会相互阻塞，所以我使用jQuery编写了脚本。

jQuery(document).ready(function(){
    $(window).resize(function(){
        var width = $(window).width();
        if (width < 768) {
            $(".col-sm-4.col-sm-offset-8.higher").removeClass("higher");
        }
        else {
            $(".col-sm-4.col-sm-offset-8").addClass("higher");
        }
    });
});

我在CodePen上测试了它，它似乎工作正常：demo但我很难在WordPress中使用它。任何见解都将不胜感激！

Answer 1

我不完全确定您希望页面的行为方式如何，但我相信我实现了列堆叠行为in the Code Pen I forked from yours.

我只使用Bootstrap CSS实现了这一点，不需要JS。

<div class="row">
    <div class="col-sm-4">
        <p class="p1">R1C1</p>
    </div>

    <div class="col-sm-4">
        <p class="p1">R2C2</p>
    </div>

    <div class="col-sm-4">
        <p class="p1">R3C3</p>
    </div>
</div>

Bootstrap网格以12列布局，因此每个部分中使用的列数通常应为12.我将这三个部分中的每一部分分成由col-sm-4指定的相等大小的部分。 Bootstrap管理发生在768像素的调整大小事件。

使用jQuery调整视口大小时更改元素位置：不使用WordPress

1 个答案: