html - (Bootstrap) 在bootstrap card后添加margin

Question

我想知道是否有办法在 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

Answer 1

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

.card {
margin-bottom: 5px;
}

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