网格引导程序和 wordpress 的问题

Posted

技术标签:

【中文标题】网格引导程序和 wordpress 的问题【英文标题】:Problem with a grid bootstrap and 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

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

塞德里克

【问题讨论】:

【参考方案1】:

如果上面没有rowColumns 将无法按需要工作

正如Bootstrap official site所说:

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

所以您必须在&lt;div class="col-12 col-lg-9"&gt; 下方添加&lt;div class="row"&gt;,但这不会使所有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>

【讨论】:

以上是关于网格引导程序和 wordpress 的问题的主要内容,如果未能解决你的问题,请参考以下文章

与 wordpress 集成的引导程序

为啥 wordpress 会覆盖引导程序?

具有固定宽度网格和应跨越窗口宽度的图像的引导程序

将引导程序包含到 wordpress 插件前端

Wordpress 下拉菜单(引导程序)

3 列网格导航栏引导程序