在<div>引导程序 5 中对齐卡内

Question

我的一个网站上的<div>似乎在对齐时遇到了问题，例如：https://www.quiz-griz.com/22-do-you-know-your-tom-hanks-movies/

顶部的广告很好，左侧的广告也很好，我想把这部分- TEXT -移到左侧广告旁边，形成一个正方形，比如：

AD
AD TEXT AD
AD

形成正方形。

我的标记：

<h2 class="mt-4 text-center"><strong><span class="text-success">Quiz:</span></strong> <?= getQuizName($quizId); ?></h2>

<div class="card text-center">
<div class="card-header"><strong><?= getQuizDescription($quizId); ?></strong></div>
<div class="card-body">

<div class="col-12 text-center"><?= html_entity_decode(getValue("quiz_ad_1_top")); ?></div>
<div class="col-3 text-center"><?= html_entity_decode(getValue("quiz_ad_2_left")); ?></div>

<div class="col-12 text-center">- TEXT -</div>

<div class="col-3 text-center"><?= html_entity_decode(getValue("quiz_ad_4_right")); ?></div>
<div class="col-12 text-center"><?= html_entity_decode(getValue("quiz_ad_3_bottom")); ?></div>

</div>
</div>  
</div>

上面的代码似乎应该可以工作，但它没有对齐，我以前确实可以工作过，但我已经复制/粘贴了很多次代码，我绕圈子转。

Answer 1

列应该用"行"；。请参阅以下代码。

<div class="card text-center">
<div class="card-header"><strong><?= getQuizDescription($quizId); ?></strong></div>
<div class="card-body">
<div class=row>
<div class="col-12 text-center"><?= html_entity_decode(getValue("quiz_ad_1_top")); ?>ad</div>
<div class="col-3 text-center"><?= html_entity_decode(getValue("quiz_ad_2_left")); ?>ad</div>
<div class="col-6 text-center">- TEXT -</div>              
<div class="col-3 text-center"><?= html_entity_decode(getValue("quiz_ad_4_right")); ?>ad</div>
<div class="col-12 text-center"><?= html_entity_decode(getValue("quiz_ad_3_bottom")); ?>ad</div>
</div>
</div>
</div>  
</div>

Answer 2

如果您想要这样的结果，那么您必须将中间内容的大小更改为col-6[Crently its 12]。然后你必须用一行来包裹，所以结构是：

<Row><col-1>Ad</Row>
<Row>
<col-3>Ad
<col-6>Main Content
<col-3>Ad
</Row>
<Row>col-12>Ad

在此处输入图像描述