如何更改 CSS 中的默认布局？

Question

在网页中渲染图像时，它们的布局不遵循普通网格，而是遵循以下网格：

考虑到我使用 Bootstrap 作为框架，我应用了双 class 样式（注意子类和父类），但它没有更改 alignment。 有没有办法可以对齐单元格，以便每个单元格占据相同的空间并且布局是矩形而不是金字塔形？

while ($row = mysqli_fetch_array($result)) {

 ?>
    <div class="col-md-3 parent">

       <form method="post" action="shporta.php?action=add&serial=<?php echo $row["Nr_Seri"]; ?>">

         <div class="product child" >
               <img src="img\\<?php echo $row["URL"]; ?>" class="img-responsive">
               <h5 class="text-info"><?php echo $row["titulli"]; ?></h5>
               <h5 class="text-danger"><?php echo $row["Cmimi"]; ?></h5>
               <input type="text" name="quantity" class="form-control" value="1">
               <input type="hidden" name="hidden_name" value="<?php echo $row["titulli"]; ?>">
               <input type="hidden" name="hidden_price" value="<?php echo $row["Cmimi"]; ?>">
               <input type="submit" name="add" style="margin-top: 5px;" class="btn btn-success"value="Shto ne Shporte"> 
           </div>
       </form>
 </div>              

.col-md-3.parent{
    display: flex;
    flex-wrap: wrap;
}

.product.child{
    flex-grow: 1;
    flex-basis: 25%;
}

Answer 1

我认为您可以将显示从 flex 更改为显示网格。

.col-md-3.parent{
    display: grid;
    flex-wrap: wrap;
}

网格完整指南