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

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 框架。如果您想继续使用它，您可能想通过阅读此页面了解网格的工作原理：https://getbootstrap.com/docs/4.5/layout/grid/

我没有测试您的代码，但是您使用 col-md-4 类的事实可能是它没有占用页面的整个宽度的原因（结果取决于您正在生成的代码的父容器，你没有显示）。

所以继续删除类col-md-4 看看会发生什么。

Answer 2

我认为您有一些使用前端或客户端（html、css、javascript）的经验。

我看到你只使用div 容器，我建议你看看 inline 和 block html 的元素之间的区别。

div 是一个 block 元素，它总是从新行开始并占据可用的整个宽度。

inline 元素不会从新行开始，只会占用必要的宽度。一个例子是span 标签。

你应该阅读这些文章：

https://www.w3schools.com/html/html_blocks.asp

https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements

我还建议您学习如何使用导航器控制台，该控制台向您显示所有 html 标记的高度和高度以及更多实用信息。