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

【问题标题】：How to change the default layout in CSS?如何更改 CSS 中的默认布局？
【发布时间】：2022-09-27 12:25:43
【问题描述】：

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

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

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%;
}

我认为您需要将您的图片调整为统一大小。
如果这意味着更改 img 元素的高度和宽度，那么我已经做到了，但它不起作用
您的其余代码在哪里？你是否用一行 (<div class=\"row\">) 围住你的 cols？整个东西都在一个容器里吗？

标签： php html css

【解决方案1】：

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

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

A Complete Guide to Grid

【讨论】：