Question

我正在重新设计网站，我想在表中显示记录，该记录上下需要4行，但是需要多少行。

我已经使用了这个脚本几个小时，但是我没有得到想要的结果。实际上，它只是逐行列出。

<div class="row">
<div class="col-3 col-12-medium">

<?php 
$finditems="Coffee Mugs - Ceramic";
$servername = '';
$username   = '';
$password   = '';
$dbname     = '';
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}$sql = "SELECT * FROM inventory WHERE product_subcategory LIKE '$finditems' 
AND(product_active='Y' OR product_active='C' OR product_active='O') AND 
web_sale<>'N' ORDER BY product_name ASC";
$result = $conn->query($sql);

if ($result->num_rows > 0) {

while($row = $result->fetch_assoc()) {
    echo "<div class=''col-3 col-12-medium'>". $row["product_name"]. "  " . 
$row["product_code"]. " $" . $row["product_p1"]. "<br><img 
src='products/".$row['product_code'].".jpg' width='100' height='100'> 
</div>";
    }
} else {
echo "0 results";
}
?>
</div><div>

其中一些结果可能只找到2个项目，其他结果可能显示10个项目（取决于搜索词）。因此，如果有多个，它会在右边显示下一个项目，直到填满第4行，然后转到下一行。我知道我缺少用于计算的内容，但我只是找不到它。

您的帮助将不胜感激。

Answer 1

对于中型屏幕设备应该是

<div class="col-md-3">....</div>

将此内容包含在您要在列中添加的所有div中。并且您想要响应式网站只需添加此

<div class="col-sm-1 col-md-3 col-lg-4">....</div>

根据需要更改号码。

CSS引导程序计算列数

1 个答案: