Question

我有一个基于php代码生成的div结构。每行有3个div。它是这样生成的：

定义列

<?php
    $numOfCols = 3;
    $rowCount = 0;
    $bootstrapColWidth = 12 / $numOfCols;
?>

第一行，开始循环并定义宽度

<div class="row">

   @foreach($datas as $data)
   <div class="col-md-<?php echo $bootstrapColWidth; ?>">

然后有很多内容

然后，最后，每个循环向行数添加一个，并检查行是否已结束，因此我们可以添加一个新的

<?php
    $rowCount++;
    if($rowCount % $numOfCols == 0) echo '</div><div class="row">';
?>
            @endforeach

现在，这一切都很好，问题是当我在每个div上添加不同数量的内容时，高度变得不同，最终变得非常难看。

我要做什么：

我试图在每一行中检查哪个div具有最大的高度，因此我可以将相同的高度应用于其他两个高度。

-我已经考虑过向每个div添加一个ID，该ID会递增，问题是我不知道会有多少个div，所以我无法为每个结果做准备。

-我尝试用$（'row div'）选择每一行，问题是所有div的大小将变成最大的大小。我想按行检查。

很抱歉，问题很长，谢谢您的投入！

Answer 1

Bootstrap 4具有flexbox classes，可让您仅使用CSS进行此操作。看一下这个例子：https://getbootstrap.com/docs/4.3/utilities/flex/#align-self

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="d-flex">
    <div class="align-self-stretch mr-3" style="background-color:lightblue">Aligned flex item</div>
    <div class="align-self-stretch mr-3" style="background-color:lightblue">Aligned flex item<br />With<br />More<br />Lines</div>
    <div class="align-self-stretch" style="background-color:lightblue">Aligned flex item</div>
</div>

Answer 2

我认为flex-box是您的解决方案：所有放入flex容器的容器都将具有相同的高度。

<div style="display:flex">
   <div>
      ... some content
   </div>
   <div>
      ... some content
   </div>
</div>

Answer 3

您可以在Bootstrap 4中使用.row-eq-height

从动态生成的div检查最大的高度

3 个答案: