Как мне создать столбцы в модалах? - PullRequest
Новая
       48

Как мне создать столбцы в модалах?

0 голосов
/ 04 декабря 2018

Я посмотрел на сайте начальной загрузки, и код просто не работает с моим PHP.Вот код ... Я пытаюсь поместить изображение в один столбец, а заголовок и содержимое во второй столбец, поэтому нет необходимости прокручивать.Он помещает все в одну тонкую колонку вместо двух. 

         <div class="modal fade" id="person-<?php echo $n; ?>" tabindex="-1" role="dialog" aria-labelledby="person-<?php echo $n; ?>Label" aria-hidden="true">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="person-<?php echo $n; ?>Label"></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">
                <div class="container-fluid">
                    <div class="row">
                        <div id="person-<?php echo $n; ?>">
                            <div class="col-4, col-sm-6">
                                <?php the_post_thumbnail('full', array('class'=>'img-fluid team-image')); ?>
                            </div>
                            <div class="col-8, col-sm-6">
                                <h2><?php the_title(); ?></h2>
                                <?php the_content(); ?>
                            </div>
                        </div>
                    </div>
                </div>

1 Ответ

0 голосов
/ 04 декабря 2018

При правильном использовании столбцы в модальных моделях работают так же, как и в других HTML.В вашем примере нет .col div внутри .row div.

Переместите содержимое в два отдельных столбца div.col, например: 

<div class="row" id="person-<?php echo $n; ?>">
    <div class="col">
        <?php the_post_thumbnail('thumbnail', array('class'=>'img-fluid team-image')); ?>
    </div>
    <div class="col">
        <h2><?php the_title(); ?></h2>
        <?php the_content(); ?>
    </div>
</div>

Подробнее о загрузочной сетке здесь: https://getbootstrap.com/docs/4.1/layout/grid/

...