如何用PHP实现Bootstrap元素的棋盘式交替布局

我当前通过PHP的foreach循环输出Bootstrap布局元素，代码如下：

<?php foreach ($cases as $case) { ?>
    <div class="case">
        <div class="row">
            <div class="col-6">
                <img src="<?= $case->getImageUrl() ?>">
            </div>
            <div class="col-6">
                <div class="text"><?= $case->text ?></div>
            </div>
        </div>
    </div>
<?php } ?>

所有元素均为左图右文的统一布局，希望实现棋盘式交替布局——偶数项显示为左文右图，奇数项保持左图右文。

方法一：通过PHP循环索引判断调换元素位置 #

在foreach中引入索引变量，根据索引奇偶性切换图片与文本的排列顺序：

<?php foreach ($cases as $index => $case) { ?>
    <div class="case">
        <div class="row">
            <?php if ($index % 2 === 0) { // 索引从0开始，偶数项保持左图右文 ?>
                <div class="col-6">
                    <img src="<?= $case->getImageUrl() ?>">
                </div>
                <div class="col-6">
                    <div class="text"><?= $case->text ?></div>
                </div>
            <?php } else { // 奇数项切换为左文右图 ?>
                <div class="col-6">
                    <div class="text"><?= $case->text ?></div>
                </div>
                <div class="col-6">
                    <img src="<?= $case->getImageUrl() ?>">
                </div>
            <?php } ?>
        </div>
    </div>
<?php } ?>

提示：若你的业务逻辑中索引从1开始计数，将判断条件改为$index % 2 === 1即可。

方法二：利用CSS Flex反转布局（无需修改HTML结构） #

如果不想改动PHP输出的HTML结构，可以通过CSS实现视觉上的布局反转：

1. 给偶数项的容器添加标识类 #

<?php foreach ($cases as $index => $case) { ?>
    <div class="case <?= $index % 2 === 1 ? 'reverse-row' : '' ?>">
        <div class="row">
            <div class="col-6">
                <img src="<?= $case->getImageUrl() ?>">
            </div>
            <div class="col-6">
                <div class="text"><?= $case->text ?></div>
            </div>
        </div>
    </div>
<?php } ?>

2. 添加CSS样式 #

.reverse-row .row {
    flex-direction: row-reverse;
}

这种方法更简洁，适合仅需视觉反转、无需调整内部元素DOM顺序的场景。

内容的提问来源于stack exchange，提问作者Hector