网格引导程序和 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】:如果上面没有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>
【讨论】:
以上是关于网格引导程序和 wordpress 的问题的主要内容,如果未能解决你的问题,请参考以下文章