首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Bootstrap响应Jumbotron

Bootstrap响应Jumbotron
EN

Stack Overflow用户
提问于 2015-04-13 01:24:42
回答 2查看 6.6K关注 0票数 1

我是Bootstrap的新手,我见过在jumbotron部分有断点的网站,当窗口达到一定尺寸时,h1和p元素会自动减小它们的大小。

这是可行的,但是默认的h1和p大小对于我的网页来说太小了。

这是HTML:

代码语言:javascript
复制
 <div class="jumbotron" id="page-header">
         <div class="container">
            <h1>日本語のクラブ</h1>
            <p class="lead">The Japanese Club!</p>
          </div>
        </div>

样式表中的代码如下所示:

代码语言:javascript
复制
.jumbotron {
    background-color: #9d2237;
    color: white;
    text-align: center;
}
    .jumbotron h1 {
        **font-size: 8em;**
    }
    .jumbotron .lead {
        opacity: .8;
    }

被星号包围的区块是我将h1巨型加速器设置为所需字体大小的地方,导致页面不再具有响应性。当我缩短窗口时,断点不起作用。我认为这是一个最小宽度/最大宽度的问题,但我找不到关于如何访问这些内容的文档,更改它们可能会影响网站的其他部分。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-04-13 01:32:37

您可以简单地使用@media查询来更改字体大小。由于您已经手动覆盖了字体大小,因此必须根据级联样式的规则,使用您自己的媒体查询来覆盖您自己声明的字体大小。

您可以参考complete documentation of how media queries are defined in Bootstrap来制定正确的媒体查询。

举个例子(值是任意决定的,但足以说明我的观点):

代码语言:javascript
复制
/* 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;
    }
}
票数 1
EN

Stack Overflow用户

发布于 2018-06-06 07:49:25

以下代码适用于所有屏幕上的jumbotron:

代码语言:javascript
复制
.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:

代码语言:javascript
复制
@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;
   }
}
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/29592302

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档