Question

我是Bootstrap的新手，我已经看到网站在jumbotron部分有断点，当窗口到达某个维度时，h1和p元素会自动缩小它们的大小。

这样可行，但默认的h1和p尺寸对我的网页来说太小了。

这是HTML：

 <div class="jumbotron" id="page-header">
         <div class="container">
            <h1>日本語のクラブ</h1>
            <p class="lead">The Japanese Club!</p>
          </div>
        </div>

这是代码在样式表中的样子：

.jumbotron {
    background-color: #9d2237;
    color: white;
    text-align: center;
}
    .jumbotron h1 {
        **font-size: 8em;**
    }
    .jumbotron .lead {
        opacity: .8;
    }

由星号包围的块是我将h1 jumbotron设置为我想要的字体大小的地方，导致页面不再具有反复性。当我缩短窗口时，断点不会发挥作用。我认为这是一个最小宽度/最大宽度的问题，但我找不到有关如何更改它们可能会影响网站其他部分的文档。

Answer 1

您只需使用@media查询即可更改字体大小。由于您已手动覆盖字体大小，因此您必须根据级联样式规则覆盖您使用自己的媒体查询声明自己的字体大小。

您可以参考complete documentation of how media queries are defined in Bootstrap来制定正确的媒体查询。

一个例子（值是任意决定的，但足以说明我的观点）：

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .jumbotron h1 {
        font-size: 4em;
    }
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .jumbotron h1 {
        font-size: 6em;
    }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .jumbotron h1 {
        font-size: 8em;
    }
}

Answer 2

以下代码适用于所有屏幕上的jumbotron：

.jumbotron {
   background: url('backgroundimage.jpg') no-repeat center center fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   background-size: cover;
   -o-background-size: cover;
}

封面属性会调整背景图像的大小以覆盖整个容器，即使它必须拉伸图像或从其中一个边缘切掉一点。

此外，您可以使用下面针对不同屏幕尺寸提到的简单查询来覆盖字体大小：

@include media-breakpoint-up(sm) {
  .jumbotron h1 {
   font-size: 1.2rem;
  }
}

@include media-breakpoint-up(md) {
  .jumbotron h1 {
   font-size: 1.4rem;
  }
}

@include media-breakpoint-up(lg) {
   .jumbotron h1 {
    font-size: 1.6rem;
   }
}

Bootstrap Responsive Jumbotron

2 个答案: