为什么 Jumbotron 似乎太大而不适合 window？

Question

我正在 Laravel 5.4 开发 Web 应用程序，它使用 Bootstrap 4.0.0 beta2 进行 front-end 设计。

问题是 Jumbotron 太大了，我必须向下和向左滚动才能看到全部内容。 我希望它适合 window（ 或者看起来像挂在大墙上的漂亮的小相框！)。

这是我的blade文件

开始
选择服务

很高兴为您服务！请从下面选择服务
地毯清洁
瓷砖清洁

下一个

在上面，我使用CDN生成了Jquery、Popper.js和Bootsrap.min.js。 而CSS是项目本身生成的（Bootstrap 4.0.0 beta2已经通过npm安装和编译）。

最有趣的是 Jumbotron 在使用 CDN 实现 CSS( followed the official docs).

时工作正常

以下部分来自我的 app.css 文件 (mylaravelproject/public/css/app.css).

@import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);

/*!
 * Bootstrap v4.0.0-beta.2 (https://getbootstrap.com)
 * Copyright 2011-2017 The Bootstrap Authors
 * Copyright 2011-2017 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */


.jumbotron {
  padding: 2rem 1rem;
  margin-bottom: 2rem;
  background-color: #e9ecef;
  border-radius: 0.3rem;
}

@media (min-width: 576px) {
  .jumbotron {
    padding: 4rem 2rem;
  }
}

.jumbotron-fluid {
  padding-right: 0;
  padding-left: 0;
  border-radius: 0;
}

我怀疑 CSS 有问题，但无法弄清楚。我错过了什么吗？

Answer 1

这是因为您将填充设置为 class .jumbotron。属性增加 .jumbotron 元素的大小（1rem 左侧，1rem 右侧）。

Answer 2

问题出在字体大小上。 Jumbotron 的大小随着其中文本的字体大小而增加。

发生这种情况是由于 mylaravelproject/resources/assets/sass/_variable.scss 文件中的变量 $font-size-base: 14rem; 的意外更改。

所以，

我必须将变量值更改为默认值。即 $font-size-base: 1rem;.
再次编译整个安装包：npm run dev

现在一切正常！

为什么 Jumbotron 似乎太大而不适合 window？

Why the Jumbotron seems too large to not fit the window?

html

css

twitter-bootstrap

laravel-5.4

选择服务