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
注意：固定宽度的卡片不适合响应。
我的网页上有一些卡片目前水平连续显示。我想让这些移动到较小的屏幕上垂直显示。目前，他们只是在屏幕缩小时离开页面。我仍然希望卡片均匀分布（目前使用 .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
注意：固定宽度的卡片不适合响应。