Question

我在引导站点上查看了该代码，但我的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>

Answer 1

如果使用得当，模态中的列的工作方式与其他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/

如何在模态中创建列？

1 个答案: