如何通过PHP循环实现Bootstrap 4新闻区块的列布局

根据你的需求，我会帮你实现一个基于Bootstrap 4的响应式新闻区块布局，用PHP循环动态渲染新闻内容。下面分两种常见布局方案来讲解：

方案一：每行4个新闻卡片（标准响应式网格） #

这个方案是最常用的，在中等及以上屏幕每行显示4个新闻项，小屏幕自动堆叠，同时保证卡片高度一致，布局更整洁。

<div class="container my-4">
    <div class="row">
        <?php
        // 假设$arItems是包含所有新闻数据的数组（比如来自Bitrix或自定义数据源）
        $itemCounter = 0;
        foreach ($arItems as $newsItem) {
            // 每4个新闻项开始新的一行
            if ($itemCounter % 4 === 0 && $itemCounter !== 0) {
                echo '</div><div class="row">';
            }
        ?>
        <div class="col-md-3 mb-4">
            <div class="card h-100">
                <!-- 新闻图片链接 -->
                <a href="<?php echo htmlspecialchars($newsItem["DETAIL_PAGE_URL"]); ?>">
                    <img 
                        src="<?php echo htmlspecialchars($newsItem["DETAIL_PICTURE"]["SRC"]); ?>" 
                        class="card-img-top" 
                        alt="<?php echo htmlspecialchars($newsItem["NAME"] ?? '新闻封面'); ?>"
                    >
                </a>
                <!-- 可选：添加新闻标题和简介 -->
                <div class="card-body">
                    <h5 class="card-title">
                        <a href="<?php echo htmlspecialchars($newsItem["DETAIL_PAGE_URL"]); ?>">
                            <?php echo htmlspecialchars($newsItem["NAME"]); ?>
                        </a>
                    </h5>
                    <p class="card-text text-muted small">
                        <?php echo htmlspecialchars($newsItem["PREVIEW_TEXT"] ?? ''); ?>
                    </p>
                </div>
            </div>
        </div>
        <?php
            $itemCounter++;
        }
        ?>
    </div>
</div>

关键细节说明： #

• 响应式布局：col-md-3 类确保在屏幕宽度≥768px时每行显示4个列（12/3=4），小屏幕自动变为单列堆叠。
• 统一卡片高度：h-100 类让同 row 内的卡片高度一致，避免因内容长度不同导致布局错乱。
• 安全防护：使用 htmlspecialchars() 转义动态内容，防止XSS攻击，这是处理用户/动态数据的必要步骤。
• 灵活换行：通过计数器控制每行4个项，即使新闻总数不是4的倍数，最后一行也能正常显示剩余项。

方案二：每列2个新闻卡片（匹配你的原始代码结构） #

如果需要和你提供的代码结构一致，即每个 col-md-3 列内包含2个新闻卡片，可以用下面的实现：

<div class="container my-4">
    <div class="row">
        <?php
        $itemCounter = 0;
        $totalItems = count($arItems);
        foreach ($arItems as $index => $newsItem) {
            // 每2个新闻项开始新的一列
            if ($itemCounter % 2 === 0) {
                echo '<div class="col-md-3">';
            }
        ?>
            <div class="card mb-4">
                <a href="<?php echo htmlspecialchars($newsItem["DETAIL_PAGE_URL"]); ?>">
                    <img 
                        src="<?php echo htmlspecialchars($newsItem["DETAIL_PICTURE"]["SRC"]); ?>" 
                        class="card-img-top" 
                        alt="<?php echo htmlspecialchars($newsItem["NAME"] ?? '新闻封面'); ?>"
                    >
                </a>
            </div>
        <?php
            // 关闭当前列：要么是第2个项，要么是最后一个未关闭的列
            if (($itemCounter + 1) % 2 === 0 || $index === $totalItems - 1) {
                echo '</div>';
            }
            $itemCounter++;
        }
        ?>
    </div>
</div>

这个方案会把每2个新闻卡片打包到一个 col-md-3 列中，和你最初给出的静态结构完全对应。

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