Блог

Главная - Вопросы по программированию - Выравнивание внутри карты в начальной загрузке 5

Выравнивание внутри карты в начальной загрузке 5

#html #twitter-bootstrap

Вопрос:

Кажется, у меня возникла проблема с выравниванием <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>

Похоже, что приведенный выше код должен работать, но он неправильно выровнен, у меня он работал раньше, но я копировал / вставлял код так много раз, что хожу по кругу.

Ответ №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>

Ответ №2:

Если вы хотите получить такой результат, вам нужно изменить размер среднего содержимого на col-6 [В настоящее время его 12]. И вы должны обернуть тогда строку, чтобы структура была:

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

введите описание изображения здесь

Метки: