Bootstrap 4 使每列大小相等？

Question

我正在尝试制作一个产品页面，并且一直在尝试 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>

产品出来（几乎）完美如下：

但是，最后一行的最后一个产品总是试图伸展到页面的整个宽度，我不希望这样，我希望每个产品的宽度和高度完全相同。我该如何解决这个问题？

我使用各种屏幕尺寸，从 iPad 到台式电脑，所以我认为我无法硬编码一行中将显示多少产品，我需要 bootstrap 动态决定宽度和它适合多少个，然后确保它们的宽度都相等。

Answer 1

您最好的选择是像这样使用 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>

Bootstrap 4 使每列大小相等？

Bootstrap 4 Make Each Column Equal Size?

html

css

size

bootstrap-4