Bootstrap响应Jumbotron
Bootstrap响应Jumbotron
提问于 2015-04-13 01:24:42
我是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巨型加速器设置为所需字体大小的地方，导致页面不再具有响应性。当我缩短窗口时，断点不起作用。我认为这是一个最小宽度/最大宽度的问题，但我找不到关于如何访问这些内容的文档，更改它们可能会影响网站的其他部分。
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-04-13 01:32:37
您可以简单地使用@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;
}
}Stack Overflow用户
发布于 2018-06-06 07:49:25
以下代码适用于所有屏幕上的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;
}cover属性将调整背景图像的大小以覆盖整个容器，即使它必须拉伸图像或剪切其中一个边缘。
此外，您可以使用下面提到的针对不同屏幕大小的简单查询来覆盖font-size：
@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;
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29592302
复制相关文章
相似问题
腾讯云开发者
