Question

我使用Wordpress && Bootstrap4。我无法在弹性项目之间留出空间：

![Bad spacing][https://i.stack.imgur.com/f8Elb.png]

当我更改ES6功能单击时，会出现此问题。

HTML代码：

<section class="d-flex flex-wrap mb-4 mx-3">
                    <!-- The Favorites loop -->

<article class="favorites-card d-inline-flex flex-grow-1 flex-shrink-1 justify-content-between" data-url="http://wordpress-dev.fil.univ-lille1.fr/2020/05/03/burn-my-eyes/">
  <div class="d-flex flex-column flex-nowrap box-shadow w-100 p-3">

    <!-- Vignette + étoile -->
    <div class="d-flex mb-1">
      <div class="d-none d-xl-block">
                  <img width="150" height="94" src="http://wordpress-dev.fil.univ-lille1.fr/wp-content/uploads/2019/12/rob-320x200.jpg" class="rounded thumbnail-decoration mr-3 mb-3 wp-post-image" alt="">              </div>
      <h3 class="text-capitalize post-title mb-1">Burn My Eyes</h3>
      <strong class="ml-auto mb-2 text-warning"><i class="fas fa-star lead"></i></strong>
    </div>

    <!-- Le texte -->
    <div class="text-justify mb-2">
      En cette année 1994, le Thrash Metal n’est pas au sommet de sa forme. L’avènement du Death quelques années auparavant lui a porté un coup sévère et ce style a été un peu ringardisé par Morbid Angel, Pestilence et consorts. [...]    </div>

    <!-- le boutton -->
    <div class="d-flex mt-auto justify-content-end">
      <a class=" btn btn-primary btn-sm" href="http://wordpress-dev.fil.univ-lille1.fr/2020/05/03/burn-my-eyes/" role="button">Lire la suite</a>
    </div>

  </div>
</article>

<!-- X articles odd or even can be add in this favorites space -->                                                        

</section>

在我更改ES6（不添加数据属性）之前，我看起来像这样，但是我不知道如何做到这一点，我在Flexbox中非常糟糕：

![Good spacing][https://i.stack.imgur.com/YVtFf.png]

Answer 1

我通过添加父项<section>来做到这一点：

 <section class="d-flex flex-wrap mb-3 mx-n3">

在<Article>上：

<article class="favorites-card d-inline-flex flex-grow-1 flex-shrink-1 m-3" data-url="http://....">

并创建一个CSS类.favorites：

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
  .favorites-card {
    flex: 1 1 100%;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .favorites-card {
    flex: 1 1 50%;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .favorites-card {
    flex: 1 1 31%; /* that f....k 1% made all */
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .favorites-card {
    flex: 1 1 30%;
  }
}

弹性项目之间的间距

1 个答案: