Bootstrap 响应式超大屏幕

Question

我是 Bootstrap 的新手，我看到网站在 jumbotron 部分有断点，当 windows 达到某个尺寸时，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 超大屏幕设置为我想要的字体大小的地方，导致页面不再响应。当我缩短 window 时，断点不会起作用。我认为这是一个 min-width/max-width 问题，但我找不到有关如何访问这些内容以及如何更改它们可能会影响网站其他部分的文档。

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 {
   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 响应式超大屏幕

Bootstrap Responsive Jumbotron

css

font-size

twitter-bootstrap