Bootstrap 5水平排列卡片小屏改为垂直排列问题咨询

你使用的是Bootstrap框架，只需要调整flex容器的响应式类和卡片宽度规则即可实现需求，修改方案如下： #

修改点说明 #

• 调整外层flex容器的类，增加响应式排列规则
• 把卡片的固定宽度改为自适应规则，避免小屏溢出

修改后的完整代码 #

<!-- Cards -->  
<div class="d-flex flex-column flex-md-row justify-content-md-around gap-3 mb-3 align-items-center">
    <div class="p-2 w-100 d-flex justify-content-center">
        <div class="card" style="max-width:400px; width:100%">
                <img class="card-img-top" src="Images/i3-10105F.jpg" alt="Card image">
                <div class="card-body">
                    <h4 class="card-title">Intel i3-10105F <span class="badge bg-success">New</span></h4>
                    <h5 class="card-title">$130</h5>
                    <p class="card-text">
                        4 Cores 8 Threads <br>
                        Core Clock: 3.70 GHz <br>
                        Boost Clock: 4.40 GHz <br>
                        LGA1200 Socket
                    </p>
                    <a href="https://www.intel.com.au/content/www/au/en/products/sku/203474/intel-core-i310105f-processor-6m-cache-up-to-4-40-ghz/specifications.html?wapkw=i3-10105F" target="_blank" class="btn btn-primary">More Information</a>
                    <a href="https://www.computeralliance.com.au/intel-s1200-core-i3-10105f-3.7ghz-quad-core-cpu-bx8070110105f" target="_blank" class="btn btn-primary">Buy</a>
                </div>
            </div>
    </div>
    <div class="p-2 w-100 d-flex justify-content-center">
        <div class="card" style="max-width:400px; width:100%">
                <img class="card-img-top" src="Images/i5-11600KF.jpg" alt="Card image">
                <div class="card-body">
                    <h4 class="card-title">Intel i5-11600KF <span class="badge bg-success">New</span></h4>
                    <h5 class="card-title">$389</h5>
                    <p class="card-text">
                        6 Cores 12 Threads <br>
                        Core Clock: 3.90 GHz <br>
                        Boost Clock: 4.90 GHz <br>
                        LGA1200 Socket
                    </p>
                    <a href="https://www.intel.com.au/content/www/au/en/products/sku/212276/intel-core-i511600kf-processor-12m-cache-up-to-4-90-ghz/specifications.html" target="_blank" class="btn btn-primary">More Information</a>
                    <a href="https://www.computeralliance.com.au/intel-s1200-core-i5-11600kf-3.9ghz-six-core-cpu-(no-cooler)-bx8070811600kf" target="_blank" class="btn btn-primary">Buy</a>
                </div>
            </div>
    </div>
    <div class="p-2 w-100 d-flex justify-content-center">
        <div class="card" style="max-width:400px; width:100%">
                <img class="card-img-top" src="Images/i9-11900K.jpg" alt="Card image">
                <div class="card-body">
                    <h4 class="card-title">Intel i9-11600K <span class="badge bg-secondary">Recommended</span></h4>
                    <h5 class="card-title">$749</h5>
                    <p class="card-text">
                        8 Cores 16 Threads <br>
                        Core Clock: 3.50 GHz <br>
                        Boost Clock: 5.30 GHz <br>
                        LGA1200 Socket
                    </p>
                    <a href="https://www.intel.com.au/content/www/au/en/products/sku/212325/intel-core-i911900k-processor-16m-cache-up-to-5-30-ghz/specifications.html?wapkw=i9-11900k" target="_blank" class="btn btn-primary">More Information</a>
                    <a href="https://www.computeralliance.com.au/intel-s1200-core-i9-11900k-3.50ghz-8-core-cpu-(no-cooler)-bx8070811900k" target="_blank" class="btn btn-primary">Buy</a>
                </div>
            </div>
    </div>
</div>

自定义调整说明 #

• 如果需要调整切换横竖排列的屏幕尺寸，可以修改断点标识：
  • 把md替换为sm：在≥576px的屏幕就切换为水平排列
  • 把md替换为lg：到≥992px的屏幕才切换为水平排列
• 可以调整gap-3的数值（可改为gap-2、gap-4等），修改卡片之间的间距大小

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