Bootstrap Responsive Jumbotron

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的超大屏幕，以我的期望的字体大小会导致页面不再响应。当我缩短窗口时，断点不起作用。我认为这是一个最小宽度/最大宽度问题，但我无法找到有关如何更改它们可能会影响网站其他部分的文档。

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 h1r { 
     font-size: 6em; 
    } 
} 

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