Question

我正在使用Bootstrap 4创建一个网站。页面的开头部分设计为占据屏幕宽度和高度的100％，一个英雄形象。以下是我在Bootstrap中使用的代码。

相关元素的HTML是

<section class="intro">
        <div class="container-fluid">
            <div class="container">
                <div class="row">
                    <!-- Large image set to display in the center of the page before scrolling down to second section.-->
                    <div class="col-lg-12">
                        <img class="center-block col-lg-8" src="images/logotype-large.png" alt="Hatch Creative design and development agency"/>
                    </div>

                </div>
            </div>

        </div>
    </section>

定位HTML的SCSS是

.intro{
    display: flex;
.container-fluid{
    padding-bottom: 20%;
    padding-top: 10%;
     background: #fcb037; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#fcb037, #f497a0);
}
.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-top: 15%;

 }
}

Javascript正在使用Scrollify，设置为使用它最基本的功能，定位正文中的部分。该代码低于 - -`

$(function() {
    $.scrollify( {
        section :"section",
    });
    });

` 要链接Scrollify，我下载了文件，它们位于站点文件夹中。我无法在线找到Scrollify的CDN。

出现的问题是，在为手机和平板电脑调整网站大小时，它会设置一个完全过大的固定高度。最后一张图片显示了我的意思。 Image here shows that when in google dev tools, it shows that the section tag is being forced to an inline height of 896px. Nowhere in my code am I indicating that sections be a fixed pixel height, so this must be part of Bootstrap's responsive code.

问题是我无法找到可以访问此功能的位置并将其禁用。据我所知，我的自定义代码都不应该影响截面高度。最初我将截面设置为视口高度为100vh，但由于这个原因我已停用该代码。这里发生了什么？

如何访问和取消强制内嵌高度

0 个答案: