网格引导程序和 wordpress 的问题答案

【问题标题】：Problem with a grid bootstrap and wordpress网格引导程序和 wordpress 的问题
【发布时间】：2021-04-30 05:39:41
【问题描述】：

我的 div.col-4 在这个页面上有问题，它在 div.col-9 中没有对齐。

我用我的代码和我的网页更好地解释：

<div class="col-12 col-lg-9">

<?php 
    if (have_posts()) {
        while(have_posts()) {

            the_post(); //the_posts() invoque l itétrationde l article en cours
             //the_title() afiche le titre de l article

?>


<div class="col-4 mb-4">
    <div class="card">
        <div class="card-body">
            <h5 class="card-title"><?=the_title();?></h5>
            <p>Par <a class="font-weight-bold">La horde</a>, <a class="text-dark"><em style="font-size:12px;">le <?= get_the_date() ?></em></a></p>
            <p class="card-text"><?= the_excerpt(); ?></p>
            <a href="<?php the_permalink(); ?>" class="btn btn-success">Lire la suite</a>
        </div>
    </div>
</div>
   
<?php           
        }   

    }      

 ?>
    
</div>

我在 WordPress 中创建了 4 篇文章，但在我的网页上显示为垂直对齐，为什么？

我给你看一张我的网页图片和渲染 html：

感谢您的帮助。祝你有美好的一天。

塞德里克

【问题讨论】：

标签： php html css wordpress bootstrap-4

【解决方案1】：

如果上面没有row，Columns 将无法按需要工作

正如Bootstrap official site所说：

在网格布局中，内容必须放在列内，并且只能列可以是行的直接子级。

所以您必须在<div class="col-12 col-lg-9"> 下方添加<div class="row">，但这不会使所有col-4 保持在同一行，因为 4*4 = 16 所以最后一张卡片会向下。

如果你想将四张卡片放在同一个row 中，你必须将col-4 更改为col-3 使总数为12，正如Bootstrap official site 所说：

列类表示您要使用的列数每行可能有 12 个。所以，如果你想要三个等宽的列对面，您可以使用 .col-4。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="col-12 col-lg-9">
  <div class="row">
     <div class="col-4 mb-4">
         <div class="card">
             <div class="card-body">
                 <h5 class="card-title"><?=the_title();?></h5>
                 <p>Par <a class="font-weight-bold">La horde</a>, <a class="text-dark"><em style="font-size:12px;">le <?= get_the_date() ?></em></a></p>
                 <p class="card-text"><?= the_excerpt(); ?></p>
                 <a href="<?php the_permalink(); ?>" class="btn btn-success">Lire la suite</a>
             </div>
         </div>
     </div>
     <div class="col-4 mb-4">
         <div class="card">
             <div class="card-body">
                 <h5 class="card-title"><?=the_title();?></h5>
                 <p>Par <a class="font-weight-bold">La horde</a>, <a class="text-dark"><em style="font-size:12px;">le <?= get_the_date() ?></em></a></p>
                 <p class="card-text"><?= the_excerpt(); ?></p>
                 <a href="<?php the_permalink(); ?>" class="btn btn-success">Lire la suite</a>
             </div>
         </div>
     </div>
     <div class="col-4 mb-4">
         <div class="card">
             <div class="card-body">
                 <h5 class="card-title"><?=the_title();?></h5>
                 <p>Par <a class="font-weight-bold">La horde</a>, <a class="text-dark"><em style="font-size:12px;">le <?= get_the_date() ?></em></a></p>
                 <p class="card-text"><?= the_excerpt(); ?></p>
                 <a href="<?php the_permalink(); ?>" class="btn btn-success">Lire la suite</a>
             </div>
         </div>
     </div>
     <div class="col-4 mb-4">
         <div class="card">
             <div class="card-body">
                 <h5 class="card-title"><?=the_title();?></h5>
                 <p>Par <a class="font-weight-bold">La horde</a>, <a class="text-dark"><em style="font-size:12px;">le <?= get_the_date() ?></em></a></p>
                 <p class="card-text"><?= the_excerpt(); ?></p>
                 <a href="<?php the_permalink(); ?>" class="btn btn-success">Lire la suite</a>
             </div>
         </div>
     </div>
   </div>
</div>

【讨论】：

首先感谢您的快速回答。我很好，但问题是 4 卡在垂直对齐上（就像我在图片上显示的那样）。 Normaly 与我放置的代码，它们是水平的 3 和后面的 1。我已经尝试过像你说的第二行它做同样的事情（同样的问题）。我真的不明白为什么它开始让我发疯（笑话）。
II 重试它的工作，因为我将行放在 the_posts() 之后。我不得不这样做很快就非常感谢@Mhd Alaa Alhaj

【解决方案2】：

我在这里发布正确答案：

<div class="col-12 col-lg-9">
  <div class="row">
<?php 
    if (have_posts()){
        while( have_posts()){

            the_post(); //the_posts() invoque l itétrationde l article en cours

                        //the_title() afiche le titre de l article

?>


    <div class="col-4 mb-4">
    
        <div class="card">

            <div class="card-body">

                <h5 class="card-title"><?=the_title();?></h5>

                <p>Par <a class="font-weight-bold">La horde</a>, <a class="text-dark"><em style="font-size:12px;">le <?= get_the_date() ?></em></a></p>

                <p class="card-text"><?= the_excerpt(); ?></p>

                <a href="<?php the_permalink(); ?>" class="btn btn-success">Lire la suite</a>

            </div>

        </div>

    </div>
    
    <?php           

            }   

        }      

    ?>
    </div>
</div>

【讨论】：