Question

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

How it should look like

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

How it actually looks

<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中。

Answer 2

不太确定这是您要实现的解决方案。下面是我的解决方案。

<div class="outerDiv">
    <div class="jumbotron jumbotron-fluid">
        <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>

<style type="text/css">
    .jumbotron{
        margin: 0;
    }
    .outerDiv{
        padding: 1.5rem;
        background: url(images/BG.jpg) no-repeat center center fixed;
        background-size: cover;
    }
</style>

我没有使用引导卡。我自己添加了externalDiv。希望这会有所帮助。

Answer 3

首先，我认为巨无霸不打算在卡内使用...我会保持原样，然后以所需的方式对其进行样式设置。

示例：

https://codepen.io/Kidkie/pen/jvMQzj

<div class="jumbotron" style="background-image: url(https://picsum.photos/2000/800); ">
  <div class="jumbotron-inner">
    <div class="jumbotron-content">
      <h1 class="display-4">Hello, world!</h1>
      <p class="lead">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>
      <a class="btn btn-primary btn-lg" href="https://www.futureride.at/shop/" role="button">Zum Shop &raquo;</a>
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-sm-4">Text after the card</div>
    <div class="col-sm-4">Text after the card</div>
    <div class="col-sm-4">Text after the card</div>
  </div>
</div>

（引导程序）引导程序卡后增加边距

3 个答案: