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