html - Bootstrap4 Jumbotron 文本和按钮元素未缩放以适应较小的 View 屏幕

Question

所以我使用 Bootstrap 4 的 Jumbotron 来设计登陆页面。在超大屏幕内，我有标准标题和段落以及 2 个号召性用语按钮。我已将这些元素包装在一个 div 中，以便为桌面屏幕正确定位它们。但是，当我缩小窗口时，元素会从超大屏幕中掉出并弄乱页面的外观。

这是它在桌面上的样子

这是它在“移动设备”上的样子

我希望你能从图片中明白我的意思。超大屏幕的背景图片 react 灵敏，但内容(文本、按钮)溢出页面。

这是相关的html

    <div class="jumbotron jumbotron-fluid">
      <div class="jumboContents"> 
          <h1 class="display-3">Welcome to Other Mother!</h1>
          <p class="lead">Scroll Down To See Whats On Offer</p>
          <hr class="my-4">
          <p>Click Below To Start Shopping or Make a Request Instantly</p>
          <p class="lead">
            <a class="btn btn-info btn-lg" href="#" role="button">Shop Now</a>
            <a class="btn btn-info btn-lg" id="contactBtn" href="#" role="button">Contact OM</a>
        </p>
      </div>
    </div>

这是相关的 CSS

.jumbotron {
    position: relative;
    top: -170px;
    height: 100vh;
    background-image: url(images/homepg.jpg);
    background-size: 100% 100%;
    margin: 0 auto;
    color: white;
    z-index: -1;
}

.jumboContents {
    position: relative;
    top: 30%;
    left: 30%;
}

Answer 1

我建议在您的 div 上使用 Bootstrap 网格类，以便在缩小屏幕时让它们正确堆叠。 (例如:div class="col-md-4 col-sm-1")