html - ( bootstrap ) bootstrap 卡后增加边距

我想知道是否有一种方法可以在引导卡之后添加边距，以免覆盖下面的文本？因此，基本上，当我尝试缩小浏览器窗口的宽度时，上方插卡中的文本被塞满并开始新的行，但下方的文本保持在同一行。我真的不知道该如何正确解释，但我将提供代码+屏幕截图。
间距应始终如下所示：



当我缩小窗口时，它看起来像这样：

<div class="card bg-secondary text-white">
          <img class="card-img" src="images/mainbackground.jpg" alt="Card image" height="500" width="100%">
          <div class="card-img-overlay">
              <div class="jumbotron">
                  <div class="container">
                      <br>
                      <h1 class="display-3 text-secondary">Hello, world!</h1>
                      <p class="text-secondary">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                      </p>
                      <p><a class="btn btn-primary btn-lg" href="https://www.futureride.at/shop/" role="button">Zum Shop &raquo;</a></p>
                  </div>
              </div>
          </div>
      </div>

      Text after the card

最佳答案

您可以通过以下两种方式之一进行操作：您可以向卡片添加内联样式。像这样的<div class="card bg-secondary text-white" style="margin-bottom: 5px;>或您可以在CSS文件中为卡片添加样式，例如：

.card {
margin-bottom: 5px;
}

我也建议将文本放在div或p中。

关于html - ( bootstrap ) bootstrap 卡后增加边距，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52077958/