时间戳

首页 > 解决方案 > 彼此下方的引导卡

html - 彼此下方的引导卡

问题描述

现在我有这个：

<div class="row row-cols-1 row-cols-md-2 g-4">

{{#each stories}}

  <div class="col">
    <div class="card shadow-sm">
      <img class="card-img-top" src="{{ image }}">
      <div class="card-body">
        <p class="card-text">{{ description }}</p>
        <div class="d-flex justify-content-between align-items-center">
          <a href="story/{{_id}}" class="btn btn-outline-dark">Читать</a>
          <small class="text-muted">author</small>
        </div>
       </div>
    </div>
  </div>

{{/each}}

</div>

它看起来像： 现在

我希望卡片在彼此下方：参考

标签： htmlbootstrap-4

解决方案

如果你想把每张卡片放在一起，你应该把 w-100 放在每张卡片上，或者像这样更改你的代码：

 <div class="row g-4">

{{#each stories}}

  <div class="col-lg-12 mx-auto">
    <div class="card shadow-sm">
      <img class="card-img-top" src="{{ image }}">
      <div class="card-body">
        <p class="card-text">{{ description }}</p>
        <div class="d-flex justify-content-between align-items-center">
          <a href="story/{{_id}}" class="btn btn-outline-dark">Читать</a>
          <small class="text-muted">author</small>
        </div>
       </div>
    </div>
  </div>

{{/each}}

</div>

推荐阅读