Bootstrap 4 使每列大小相等？答案

【问题标题】：Bootstrap 4 Make Each Column Equal Size?Bootstrap 4 使每列大小相等？
【发布时间】：2018-01-26 19:26:46
【问题描述】：

我正在尝试制作一个产品页面，并且一直在使用 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 到台式 PC，所以我认为我无法硬编码单行上会出现多少产品，我需要引导程序来动态决定宽度和适合多少产品然后确保它们的宽度相等。

【问题讨论】：

您是否尝试过使用col-auto？
相关如果不重复 - stackoverflow.com/questions/18744164/…
或 - stackoverflow.com/questions/42176419/…
在这两种情况下，这两个示例看起来都不像使用 Bootstrap 4。这个问题专门关于我们如何使用 Bootstrap 4 来实现这一点。
@Klooven，这可能就是我想要的！您能否发布这个，因为我可以接受这个，唯一的问题是它不会通过调整每个产品的宽度来占据整个宽度，而是它似乎占据了每个产品的最小宽度。如果我有动态产品（例如一些带有较大文本的产品），每个盒子的尺寸是否会不同，或者这是否会确保每个盒子的尺寸相同？

标签： html css size bootstrap-4

【解决方案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>

【讨论】：

谢谢，我把它改成了“col”，不幸的是仍然得到完全相同的结果。我的印象是 col-sm 存在，感谢您澄清这一点。
您现在有 8 列。这就是你想要的连续吗？
这是问题的一部分，我不知道。因为如果我在手机上浏览网站，我只能装 1，但如果我在台式电脑上浏览，我可以装 8。所以我希望引导程序自动计算出来，而不是我具体指定应该打开多少每一个。如果它们溢出，这不会迫使它们相互堆叠吗？而不是并排堆叠？
我认为你在做某事，我将其更改为 col-sm-3 以在每个宽度上添加 4，它的行为似乎符合我的预期，除了唯一的问题是 ml-2 是强制最后一个元素进入下一行。所以我在右侧有一个巨大的空白。
您能否在问题中发布您的代码，以便我看一下。