Question

我正在使用Laravel 5.4中的Web应用程序，该应用程序使用Bootstrap 4.0.0 beta2进行前端设计。

问题是Jumbotron太大了，我必须向下滚动才能看到整个内容。我希望它适合窗口（或看起来像一个在大墙上的小美丽相框！）。

1.这是我的刀片文件

<!doctype html>
<html lang= en>
<head>

<title>Get Started</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="{{ asset('/css/app.css') }}" rel="stylesheet">
</head>
<body style="background-color: #ffff">


    <div class="jumbotron"> 
    <div class="container">

    <h1><font color="#1E90FF"> Choose services </font> </h1>
    <hr class="my-4">

    <p > We are much happy to serve you! 
    Please choose  services from below</p>

    <div class= "checkbox">
        <label>
            <input type="checkbox"> Carpet cleaning</label> <br>
        <label>
            <input type="checkbox"> Tile cleaning</label>   
    </div>

    <p>
    <a class="btn btn-default" href="#" role="button">Next</a>
    </p>
    </div>
    </div>



    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
    integrity="sha384-
    KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
    crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" 
   integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
    </body>
    </html>

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

最有趣的是 Jumbotron在使用CDN 实现CSS（ followed the official docs）时工作正常。

2.以下部分来自我的app.css文件（mylaravelproject / public / css / app.css）。

＆＃13;

@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;
}

＆＃13;

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

Answer 1

问题出在font-size上。 Jumbotron的大小随着文本的字体大小而增加。

这是由于SELECT DISTINCT ad.state "State", COUNT(r.ratingid) over(PARTITION BY ad.state) "Number of Ratings", COUNT(DISTINCT CASE WHEN a.awardid IS NOT NULL THEN r.ratingid END) over(PARTITION BY ad.state) "Num Award Winning Movies Rated" FROM netflix.addresses ad JOIN netflix.ratings100 r ON ad.custid = r.custid JOIN netflix.movies_awards a ON r.movieid = a.movieid GROUP BY "State";文件中的变量$font-size-base: 14rem;意外更改而发生的。

所以，

我必须将变量值更改为默认值。即mylaravelproject/resources/assets/sass/_variable.scss。
再次编译整个已安装的软件包：$font-size-base: 1rem;

现在一切正常！

Answer 2

因为您正在为.jumbotron课程设置填充。此属性会增加.jumbotron元素的大小（1rem左侧，1rem右侧）。

为什么Jumbotron看起来太大而不适合窗户？

2 个答案: