首页 > 解决方案 > Bootstrap 网格环导致不同的高度

问题描述

在此处输入图像描述我有一个引导网格的循环,由于某种原因,结果的高度与不同的高度交错输出?见图片。奇怪的是,在我的本地服务器上它工作正常。也许这与我的 wordpress 主题有些冲突?我已尝试多次添加屏幕截图,但它不会让我这样做。如果有人看到这段代码这样做的任何原因,请告诉我。

<div class='container-fluid'>
    <div class='row'>
<?php
$host = "---------";
$username = "-------";
$password = "-----";
$db_name = "------";

$conn = mysqli_connect($host, $username, $password, $db_name);

if ($conn != true)
{
echo "No Connected!";
}


$category = $_POST['category'];
$location = $_POST['location'];
$cash = $_POST['cash'];

$sql = "select * from franchise where category like '%$category%' and location like '%$location%' and investment <= $cash";

$result = $conn->query($sql);
if ($result->num_rows > 0) {
    // output data of each row
    while($row = $result->fetch_assoc()) {
    echo "<div class='col-sm-4' style='padding: 15px;border-radius: 5px;'>"."<div style='border-style: solid; border-color: black; border-width: thin; padding: 15px; border-radius: 10px;'>".
          "<center><img src='".$row['image']."' width='200' height='200'><br>"."<a href='".$row['page_link']."'>".$row['name']."</a><br><p>"
          .$row['description']."</p><br><input style='width: 120px;
          height: 45px;
          background-color: orange;
          border-style: solid;
          border-color: red;
          border-width: thin;
          border-radius: 10px;
          color: white;' type='submit' value= '=> Request Info' ></center>
          </div>
          </div>";
    }
} else {
    echo "0 results";
}
$conn->close();

?>
</div>
 </div>

标签: phpcsswordpress

解决方案


我想你忘px了你的<img>标签。尝试<img src='".$row['image']."' width='200px' height='200px'

也可能是您class='col-sm-4'的图像高度随图像高度缩放。因此,请确保将所有图像转换为相同的高度。


推荐阅读