图像作为列而不是行。 bootstrap/css 代码有什么问题？

Question

这是我使用 Bootstrap 4.0 的代码。这些项目显示为彼此之间的一列，但是，我希望输出彼此相邻。在我的格式类中，我需要 add/change 做什么？

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


    <?php

            $sql = "SELECT * FROM dish WHERE hide ='1'";

            $res = mysqli_query($link, $sql);

            $count = mysqli_num_rows($res);

            if($count>0)
            {
                while($row=mysqli_fetch_assoc($res))
                {
                    $did = $row['did'];
                    $nom = $row['nom'];
                    $description = $row['description'];
                    $last_rating = $row['last_rating'];
                    
                ?>
                <div class="mb-4"></div>
                        <div class="row">
                        <div class="col-md-3">
                            <div class="thumbnail">
                                <a href="index.php">
                                    <img src="img/gallery/01.jpg" class="rounded-top">
                                </a>
                                <h4 class="text-center my-3"><?php echo $nom; ?></h4>
                                <p class="text-center"><?php echo $description; ?></p>
                                <a href="index.php?dish_did<?php echo $did; ?>" class="btn btn-success" role="button">Rate!</a>
                            </div>
                        </div>
                        </div>

                        <?php
                }
            

            }
            else{

                echo "<div class='error'>Food not available.</div>";
            }
            ?>

现在：

它应该是什么样子：

Answer 1

您将每张图片都放在它自己的行中，所以这就是每行一张图片的原因。

您应该将 .row 移出 while 循环：

echo '<div class="row">';

while($row = mysqli_fetch_assoc($res)) {
    $did = $row['did'];
    $nom = $row['nom'];
    $description = $row['description'];
    $last_rating = $row['last_rating'];
                    
    echo <<< HTML
        <div class="mb-4"></div>
        <div class="col-md-3">
            <div class="thumbnail">...</div>
        </div>
    HTML;
}

echo '</div>';

如果你真的需要每2张图片放.row，那么使用array_chunk()

$chunks = array_chunk(mysqli_fetch_all(), 2);

foreach ($chunks as $chunk) {
    echo '<div class="row">';

    foreach ($chunk as $row) {
        $did = $row['did'];
        $nom = $row['nom'];
        $description = $row['description'];
        $last_rating = $row['last_rating'];
                    
        echo <<< HTML
            <div class="mb-4"></div>
            <div class="col-md-3">
                <div class="thumbnail">...</div>
            </div>
        HTML;
    }

    echo '</div>';
}

Answer 2

为了更加灵活，您可以使用网格系统。然后你不需要用 php 计算行。

例如：

.row{
  width: 50%;
}
.col-c {
  background: green;
  padding:10px;
  margin-top:10px;
}

.col-c img {
  width: 100%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


 <div class="row">
  <div class="col-6">
    <div class="col-c">
      <img src="https://via.placeholder.com/500">
    </div>
  </div>
  <div class="col-6">
    <div class="col-c">
      <img src="https://via.placeholder.com/500">
    </div>
  </div>
  <div class="col-6">
    <div class="col-c">
      <img src="https://via.placeholder.com/500">
    </div>
  </div>
</div>

图像作为列而不是行。 bootstrap/css 代码有什么问题？

Image as column instead of row. Whats wrong with bootstrap/css code?

css

bootstrap-4