Bootstrap4 Jumbotron文本和按钮元素未缩放以适合较小的视图屏幕

Question

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

以下是它在桌面上的显示方式

以下是它在“移动”上的表现

我希望你能从图像中看出我的意思。 jumbotron的背景图像完全响应，但内容（文本，按钮）溢出页面。

这是相关的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”）