Question

我正在努力调整我的文章：

我正在使用bootstrap 4.3.0，这是各行的代码：

<div class="row bg-light"> 
    <?php
    foreach ($newsList as $news){?>
    <article class="col-md-4 blogpost border rounded p-0">
            <div class="imgBx">
                <img src="/images/<?=$news['image'] ?>" alt="" class="img-fluid">
            </div>
            <div class="content">
              <h2 class="itemrecent1"><?= $news['titre'] ?></h2>
              <p class="float-left m-0"><i class="fas fa-clock"></i>  <?= $news['dateAjout']->format('Y-m-d') ?></p><br>
              <p class="itemrecent1"><?= nl2br($news['contenu']) ?></p>
                <?php
                if ($category === 'news'){?>
              <div class="itemrecent1"><a href="/news/<?php echo $generator->generate($news['titre']); ?>_<?= $news['id'] ?>" class="btn btnD1">Read</a></div>
                <?php
                }else {?>
              <div class="itemrecent1 justify-self-end"><a href="/guide/<?= $category ?>/<?php echo $generator->generate($news['titre']); ?>_<?= $news['id'] ?>" class="btn btnD1">Read</a></div>
                <?php
                }?>
              <div class="clearfix"></div>
            </div>
    </article>
    <?php } ?>   <!-- End of news -->
</div>

所以我希望在我的文章之间有条缝...

此外，如果您知道如何调整内容（框内的文本，因为我尝试了一些flexbox css，但没有任何变化（我希望至少所有Read链接处于同一级别（底部））...

==>如果我在像素中放置一些高度但不能这样做，因为我需要响应式设计，这是可行的。

谢谢...：D

Answer 1

装订线在那里，它们来自col-*类的填充。因为您在文章中添加了border类，所以填充自然会被边框包围。通常，在使用Bootstrap网格布局时，会将内容放置在具有所需col-*类的包装元素内：

<div class="row bg-light"> 
    <?php
    foreach ($newsList as $news){?>
  <div class="col-md-4">
    <article class="blogpost border rounded p-0">
            <div class="imgBx">
                <img src="/images/<?=$news['image'] ?>" alt="" class="img-fluid">
            </div>
            <div class="content">
              <h2 class="itemrecent1"><?= $news['titre'] ?></h2>
              <p class="float-left m-0"><i class="fas fa-clock"></i>  <?= $news['dateAjout']->format('Y-m-d') ?></p><br>
              <p class="itemrecent1"><?= nl2br($news['contenu']) ?></p>
                <?php
                if ($category === 'news'){?>
              <div class="itemrecent1"><a href="/news/<?php echo $generator->generate($news['titre']); ?>_<?= $news['id'] ?>" class="btn btnD1">Read</a></div>
                <?php
                }else {?>
              <div class="itemrecent1 justify-self-end"><a href="/guide/<?= $category ?>/<?php echo $generator->generate($news['titre']); ?>_<?= $news['id'] ?>" class="btn btnD1">Read</a></div>
                <?php
                }?>
              <div class="clearfix"></div>
            </div>
    </article>
  </div>
    <?php } ?>   <!-- End of news -->
</div>

看起来您实际上在another page on your site上正确无误

知道为什么我的文章之间没有缝隙吗？引导程序4

1 个答案: