0

我似乎在<div>我的一个网站上对齐 's 时遇到问题，例如：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>

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

4

2 回答 2

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>
于 2021-07-03T07:21:15.063 回答
0

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

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

在此处输入图像描述

于 2021-07-03T08:56:50.043 回答