Bootstrap 5 张卡片垂直显示

Bootstrap 5 Cards Displayed Vertically

我的网页上有一些卡片目前水平连续显示。我想让这些移动到较小的屏幕上垂直显示。目前,他们只是在屏幕缩小时离开页面。我仍然希望卡片均匀分布(目前使用 .justify-content-between)。卡片的代码是

    <!-- Cards -->  
<div class="d-flex justify-content-around mb-3">
    <div class="p-2">
        <div class="card" style="width:400px">
                <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">0</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">
        <div class="card" style="width:400px">
                <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">9</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">
        <div class="card" style="width:400px">
                <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">9</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>

非常感谢任何帮助。

使用网格 类 (row > col) 进行响应行为。例如...

<div class="container-fluid">
    <div class="row justify-content-around mb-3">
        <div class="col-lg-4">
            <div class="card" style="width:400px">
                <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">0</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="col-lg-4">
            <div class="card" style="width:400px">
                <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">9</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="col-lg-4">
            <div class="card" style="width:400px">
                <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">9</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>
</div>

演示:https://codeply.com/p/RX3tviIzOB

注意:固定宽度的卡片不适合响应。