我正在尝试制作一个产品页面,并且一直在 Bootstrap 4 中尝试不同的配置,现在几乎已经完美,但我只有一个小问题。
基本上我使用以下代码:
<div class="row row-spacing">
<div class="col-sm ml-2 mb-2 product_cell">
<img class="product_image" src="images/products/coke_can.png">
<hr>
<p class="product_name" style="text-align: center">Coca Cola 300 ml</p>
<p class="product_price">€0.80</p>
</div>
<div class="col-sm ml-2 mb-2 product_cell">
<img class="product_image" src="images/products/coke_can.png">
<hr>
<p class="product_name" style="text-align: center">Coca Cola 300 ml</p>
<p class="product_price">€0.80</p>
</div>
.... ....
</div>
但是,最后一行的最后一个产品总是尝试拉伸(stretch)到页面的整个宽度,我不希望这样,我希望每个产品的宽度和高度完全相同。我该如何解决这个问题?
我使用各种屏幕尺寸,从 iPad 到台式电脑,所以我认为我无法硬编码单行上会出现多少产品,我需要 Bootstrap 来动态决定宽度以及适合的数量,然后确保它们的宽度都相等。
最佳答案
你最好的选择是使用col-auto
,如下所示:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-auto ml-2 mb-2 product_cell">
<img class="product_image" src="https://placeimg.com/100/150/animals"><hr>
<p class="product_name">Coca Cola 300 ml</p>
<p class="product_price">€0.80</p>
</div>
<div class="col-auto ml-2 mb-2 product_cell">
<img class="product_image" src="https://placeimg.com/120/150/animals"><hr>
<p class="product_name">Coca Cola 300 ml</p>
<p class="product_price">€0.80</p>
</div>
<div class="col-auto ml-2 mb-2 product_cell">
<img class="product_image" src="https://placeimg.com/140/150/animals"><hr>
<p class="product_name">Coca Cola 300 ml</p>
<p class="product_price">€0.80</p>
</div>
<div class="col-auto ml-2 mb-2 product_cell">
<img class="product_image" src="https://placeimg.com/160/150/animals"><hr>
<p class="product_name">Coca Cola 300 ml</p>
<p class="product_price">€0.80</p>
</div>
<div class="col-auto ml-2 mb-2 product_cell">
<img class="product_image" src="https://placeimg.com/180/150/animals"><hr>
<p class="product_name">Coca Cola 300 ml</p>
<p class="product_price">€0.80</p>
</div>
<div class="col-auto ml-2 mb-2 product_cell">
<img class="product_image" src="https://placeimg.com/100/150/animals"><hr>
<p class="product_name">Coca Cola 300 ml</p>
<p class="product_price">€0.80</p>
</div>
<div class="col-auto ml-2 mb-2 product_cell">
<img class="product_image" src="https://placeimg.com/100/150/animals"><hr>
<p class="product_name">Coca Cola 300 ml</p>
<p class="product_price">€0.80</p>
</div>
<div class="col-auto ml-2 mb-2 product_cell">
<img class="product_image" src="https://placeimg.com/100/150/animals"><hr>
<p class="product_name">Coca Cola 300 ml</p>
<p class="product_price">€0.80</p>
</div>
<div class="col ml-2 mb-2 product_cell">
<img class="product_image" src="https://placeimg.com/100/150/animals"><hr>
<p class="product_name">Coca Cola 300 ml</p>
<p class="product_price">€0.80</p>
</div>
<div class="col ml-2 mb-2 product_cell">
<img class="product_image" src="https://placeimg.com/100/150/animals"><hr>
<p class="product_name">Coca Cola 300 ml</p>
<p class="product_price">€0.80</p>
</div>
</div>
</div>
关于html - Bootstrap 4 使每列大小相等?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48459625/