新手求助：如何在Bootstrap中实现响应式5列产品展示行？

问题分析 #

你代码里用的col-lg-2.4是无效的——Bootstrap栅格系统基于12列整数等分，不支持小数列宽类，这就是布局破坏响应性的原因。要实现5列布局，得用自定义CSS或Bootstrap的flex工具类来实现。

方法1：使用Bootstrap Flex工具类（推荐） #

利用Bootstrap原生flex工具类，配合自定义列宽样式，实现5列等分且保留响应式：

<div class="container-fluid py-5 m-0">
    <div class="container-fluid m-0">
        <div class="row g-0 gx-5 align-items-end">
            <div class="col-lg-6">
                <div class="section-header text-start mb-5">
                    <span class="display-5 mb-3 fw-bolder">Os Nossos produtos</span>
                </div>
            </div>
            <div class="col-lg-6 text-lg-end position-relative" style="bottom: 50px;">
                <h5><a href="" class="mb-3" style="text-decoration: none;">View All <i class="fa-solid fa-arrow-right"></i></a></h5>
            </div>
        </div>
        <div class="tab-content">
            <div id="tab-1" class="tab-pane p-0 active">
                <!-- 核心修改：用row flex-wrap + 自定义列类 -->
                <div class="row g-0 flex-wrap">
                    <!-- 每个产品列保留原有响应式断点，新增lg断点的5列类 -->
                    <div class="col-6 col-sm-4 col-md-3 col-lg-5th col-xl-2">
                        <div class="product-item">
                            <div class="position-relative bg-light overflow-hidden">
                                <img class="img-fluid w-100" src="img/imagensMiguel/produto_1.jpeg" alt="">
                            </div>
                            <div class="p-4">
                                <a class="d-block h5 mb-2" href="">Fresh Tomato</a>
                                <span class="text-primary me-1">$19.00</span>
                                <span class="text-body text-decoration-line-through">$29.00</span>
                            </div>
                            <div class="d-flex ">
                                <small class="w-50 text-center py-2">
                                    <a class="text-body" href=""><i class="fa fa-shopping-bag text-primary me-2"></i>Add to cart</a>
                                </small>
                            </div>
                        </div>
                    </div>
                    <!-- 复制其他产品列，保持相同类结构 -->
                    <div class="col-6 col-sm-4 col-md-3 col-lg-5th col-xl-2">
                        <div class="product-item">
                            <div class="position-relative bg-light overflow-hidden">
                                <img class="img-fluid w-100" src="img/imagensMiguel/produto_2.jpeg" alt="">
                            </div>
                            <div class="p-4">
                                <a class="d-block h5 mb-2" href="">Fresh Tomato</a>
                                <span class="text-primary me-1">$19.00</span>
                                <span class="text-body text-decoration-line-through">$29.00</span>
                            </div>
                            <div class="d-flex ">
                                <small class="w-50 text-center py-2">
                                    <a class="text-body" href=""><i class="fa fa-shopping-bag text-primary me-2"></i>Add to cart</a>
                                </small>
                            </div>
                        </div>
                    </div>
                    <div class="col-6 col-sm-4 col-md-3 col-lg-5th col-xl-2">
                        <div class="product-item">
                            <div class="position-relative bg-light overflow-hidden">
                                <img class="img-fluid w-100" src="img/imagensMiguel/produto_3.png" alt="">
                            </div>
                            <div class="p-4">
                                <a class="d-block h5 mb-2" href="">Fresh Tomato</a>
                                <span class="text-primary me-1">$19.00</span>
                                <span class="text-body text-decoration-line-through">$29.00</span>
                            </div>
                            <div class="d-flex ">
                                <small class="w-50 text-center py-2">
                                    <a class="text-body" href=""><i class="fa fa-shopping-bag text-primary me-2"></i>Add to cart</a>
                                </small>
                            </div>
                        </div>
                    </div>
                    <div class="col-6 col-sm-4 col-md-3 col-lg-5th col-xl-2">
                        <div class="product-item">
                            <div class="position-relative bg-light overflow-hidden">
                                <img class="img-fluid w-100" src="img/imagensMiguel/produto_1.jpeg" alt="">
                            </div>
                            <div class="p-4">
                                <a class="d-block h5 mb-2" href="">Fresh Tomato</a>
                                <span class="text-primary me-1">$19.00</span>
                                <span class="text-body text-decoration-line-through">$29.00</span>
                            </div>
                            <div class="d-flex ">
                                <small class="w-50 text-center py-2">
                                    <a class="text-body" href=""><i class="fa fa-shopping-bag text-primary me-2"></i>Add to cart</a>
                                </small>
                            </div>
                        </div>
                    </div>
                    <div class="col-6 col-sm-4 col-md-3 col-lg-5th col-xl-2">
                        <div class="product-item">
                            <div class="position-relative bg-light overflow-hidden">
                                <img class="img-fluid w-100" src="img/imagensMiguel/produto_2.jpeg" alt="">
                            </div>
                            <div class="p-4">
                                <a class="d-block h5 mb-2" href="">Fresh Tomato</a>
                                <span class="text-primary me-1">$19.00</span>
                                <span class="text-body text-decoration-line-through">$29.00</span>
                            </div>
                            <div class="d-flex ">
                                <small class="w-50 text-center py-2">
                                    <a class="text-body" href=""><i class="fa fa-shopping-bag text-primary me-2"></i>Add to cart</a>
                                </small>
                            </div>
                        </div>
                    </div>
                    <div class="col-6 col-sm-4 col-md-3 col-lg-5th col-xl-2">
                        <div class="product-item">
                            <div class="position-relative bg-light overflow-hidden">
                                <img class="img-fluid w-100" src="img/imagensMiguel/produto_3.png" alt="">
                            </div>
                            <div class="p-4">
                                <a class="d-block h5 mb-2" href="">Fresh Tomato</a>
                                <span class="text-primary me-1">$19.00</span>
                                <span class="text-body text-decoration-line-through">$29.00</span>
                            </div>
                            <div class="d-flex ">
                                <small class="w-50 text-center py-2">
                                    <a class="text-body" href=""><i class="fa fa-shopping-bag text-primary me-2"></i>Add to cart</a>
                                </small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

添加自定义CSS（放在Bootstrap样式之后）：

/* lg断点（992px以上）实现5列等分 */
@media (min-width: 992px) {
    .col-lg-5th {
        flex: 0 0 auto;
        width: 20%; /* 100% ÷ 5 = 20% */
        max-width: 20%;
    }
}

方法2：纯自定义栅格类 #

如果不想依赖flex工具类，可直接定义全断点的5列类：

/* 全局5列类 */
.col-5th {
    flex: 0 0 auto;
    width: 20%;
    max-width: 20%;
}

/* md断点以下调整为3列 */
@media (max-width: 768px) {
    .col-md-5th {
        width: 33.3333%;
        max-width: 33.3333%;
    }
}

替换HTML中对应的列类即可。

关键说明 #

• Bootstrap栅格基于12列，5列无法被12整除，必须用自定义宽度实现。
• 保留col-6、col-sm-4等断点类，保证小屏幕下的适配（手机2列、平板3列、桌面5列）。
• 自定义CSS优先级要高于Bootstrap样式，需放在Bootstrap之后引入。

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