#html #bootstrap-5 #bootstrap-cards
Вопрос:
У меня есть несколько карточек на моей веб-странице, которые в настоящее время отображаются горизонтально подряд. Я хочу, чтобы они перемещались для отображения по вертикали на меньшем экране. На данный момент они просто исчезают со страницы, когда экран сжимается. Я все еще хочу, чтобы карты были равномерно распределены (в настоящее время используются .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">$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">
<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">$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">
<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">$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>
Любая помощь приветствуется.
Комментарии:
1. Вы с трудом устанавливаете ширину своих карт. Вместо этого вы могли бы использовать классы столбцов. Посмотрите, как использовать сеточную систему Bootstrap или систему столбцов Bootstrap. getbootstrap.com/docs/5.0/layout/grid
Ответ №1:
Используйте классы сетки ( 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">$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="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">$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="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">$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>
</div>
Демонстрация: https://codeply.com/p/RX3tviIzOB
Примечание: карты с фиксированной шириной плохо работают для быстрого реагирования.
Комментарии:
1. Хорошо. Спасибо, я попробую это