如何让搜索结果填满页面？

Question

我在我们的网站上创建了自己的搜索功能。它使用一个简单的 php 脚本来搜索我们的数据库以查找用户正在寻找的内容。搜索结果页面未填满页面宽度，结果垂直显示，一个接一个。

显示结果的代码。

        $count = 0;

        while($row = $stmt->fetch(PDO::FETCH_ASSOC)) {

            $t = $count%3;

            echo ($t == 2) ? "<div class='col-md-4'>" : "<div class='col-md-4'>";

            echo "<div class='card mb-4 shadow-sm'>";

            echo "<img class='img-thumbnail' width='300px' src='".$row['image']."'>";

            echo "<div class='card-body'>";

            echo "<p class='card-text'>".$row['title'] ."<br>".$row['isbn']."</p>";

            echo "<div class='d-flex justify-content-between align-items-center'>";

            echo "<div class='btn-group'>";

            echo "<a href='".$row['url']."'>Start Reading</a>";

            echo "</div>";

            echo "</div>";

            echo "</div>";

            echo "</div>";

            echo "</div>";

            $count++;

我怎样才能让结果填满页面的宽度？

Answer 1

看来您正在使用 Bootstrap CSS 框架。我没有测试你的代码，但你正在使用这个类的事实col-md-4可能是它没有占据页面的整个宽度的原因（结果取决于你正在生成的代码的父容器，你没有显示).因此，继续删除该类，col-md-4看看会发生什么。

Answer 2

我认为您有一些使用前端或客户端（html、css、javascript）的经验。我看到您只使用容器，我建议您查看内联和块html 元素div之间的区别。Thediv是一个块元素，它总是从一个新行开始并占据可用的整个宽度。内联元素不会从新行开始，只会占据必要的宽度。一个例子是span标签。我还建议您学习如何使用导航器控制台，它会向您显示所有 html 标签的宽度和高度以及更多实用信息。