css - Bootstrap 响应式超大屏幕

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;
    }

星号包围的 block 是我将 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;
    }
}