Любая идея, почему у меня нет желобов между моими статьями? Bootstrap 4

Question

Я изо всех сил корректирую свои статьи здесь:

https://cryptoranger.net/news

Я использую загрузчик 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, но ничего не изменилось (я хочу, чтобы все прочиталиссылка на том же уровне (внизу)) ...

==> Это работает, если я помещаю некоторую высоту в пиксель, но не могу этого сделать, потому что мне нужен адаптивный дизайн ..

Спасибо ...: 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>

Похоже, на самом деле это правильно на другой странице вашего сайта