如何使我的内容水平显示？答案

【问题标题】：How do I make my content appear horizontally?如何使我的内容水平显示？
【发布时间】：2020-11-21 00:21:07
【问题描述】：

我正在使用 PHP、HTML、CSS 和 Bootstrap 创建一个电影网站。

我想水平显示电影（图像、标题、一些信息），这样每行会有 3 部电影。目前，电影是垂直显示的。

这是我的代码：

$display_content .= '
    <div class="container mt-5 text-center">
        <div class="d-inline">
            <img src="'.$sub_row["poster_url"].'" class="img-responsive img-thumbnail"/>
            <h4>'.$sub_row["title"].'</h4>
            <p>'.$sub_row["description"].'</p>
            <p>'.$sub_row["duration"].'</p>
        </div>
    </div>
    ';

【问题讨论】：

这段代码只有1个div。你到底想做什么？
@FelippeDuarte 我想水平显示图像（连同标题和描述等）（每行 3 个）。这些内容将从数据库中获取并显示在网站上。目前，我可以获取并显示在网站上。但是，内容是水平显示的，而不是每行 3 个内容。
要么使用弹性框，要么使用 css-grid。
@FelippeDuarte 为了清楚起见，我已经编辑了这个问题。
@tacoshy 我尝试了这两种方法，但都没有成功... PHP 可能会造成限制吗？

标签： html css bootstrap-4

【解决方案1】：

您可以使用引导程序 .flex-row 设置水平方向。我希望你的问题是正确的。

$display_content .= '
    <div class="container mt-5 text-center">
        <div class="d-flex flex-row">
           <div class="p-2">
            <img src="'.$sub_row["poster_url"].'" class="img-responsive 
             img-thumbnail"/>
           </div>
        <div class="p-2">
            <h4>'.$sub_row["title"].'</h4>
        </div>
        <div class="p-2">
            <p>'.$sub_row["description"].'</p>
        </div>
        <div class="p-2">
            <p>'.$sub_row["duration"].'</p>
        </div>
 
        </div>

        </div>
    </div>
    ';

【讨论】：

为了清楚起见，我已经编辑了这个问题。我也试过你分享的这个方法，但是它仍然不能水平显示电影。图像仍然垂直显示，只有内容水平显示。但是，我想要每行 3 部电影。

【解决方案2】：

您可以在代码中为父级指定以下 CSS：

display: inline-block;
width: 33%;

您可以做的另一件事是使用引导类，方法是使用“row”类包装每一行，并且“row”的每个直接子级都可以具有类“col-sm”。或者，您可以只为“container mt-5 text-center”的每个实例添加一个额外的“col-sm-4”类。由于 bootstrap 的网格系统使用 12 列，“col-sm-4”会将 div 的大小调整为占父宽度的三分之一。查看Bootstrap's document 了解更多信息。 Bootstrap 也支持弹性盒子。

【讨论】：

您好，感谢您抽出宝贵时间回答我的问题。我已经尝试过您提到的 CSS 方法以及 Bootstrap Grid System 但无济于事....我也尝试过弹性框但它不起作用...