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

【问题标题】：Bootstrap4 Jumbotron Text and Button elements not scaling to Fit in Smaller View ScreenBootstrap4 Jumbotron 文本和按钮元素未缩放以适合较小的视图屏幕
【发布时间】：2017-09-05 20:08:16
【问题描述】：

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

这是它在桌面上的样子

这是它在“移动”上的外观

我希望你能从图片中明白我的意思。 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%;
}

【问题讨论】：

您将需要将这些样式包装在媒体查询中，或者使用可识别断点的内置定位类（它们被包装在媒体查询中，用于定义的各种断点通过引导）。
@TiesonT。谢谢。这真的应该很明显。固定

标签： html css bootstrap-4

【解决方案1】：

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

【讨论】：

是否可以使用网格系统将单个div（或jumbotron）分成行和列而不是整个页面？
因此，使用网格系统，您可以在单个 div 中划分内容。假设您有一个 div 并且它涵盖了所有 12 列，那么当您将这些类添加到 div 时，它将根据您应用于 div 的类进行堆叠。我不知道你对网格系统有多熟悉。这是一个很好的观点：v4-alpha.getbootstrap.com/layout/grid 网格系统的整个想法是在屏幕尺寸缩小时启用堆叠。现在我不知道jumbotron是否也可以堆叠，但尝试一下总不会有坏处。 :)
我不认为这将是 jumbotron 的问题。 :) 我相信你可以申请这些课程。