Div 缩小时与另一个 Div 重叠

Question

我在这里遇到了一个小问题。当我缩小屏幕时，由于某种原因，“灰色”颜色会进入它下方的白色 div。它上面的 div 是我的 jumbotron，所以我不确定为什么会这样。

下面是我的网站，供您查看，看看在计算机上减少它会发生什么。

hustlebussellunlimited.com

下面是我的一些 CSS 代码，如果您需要更多，请告诉我。

.jumbotron{
    background: linear-gradient(
            rgba(0, 0, 0, 0.1),
            rgba(0, 0, 0, 0.2)
    ), url(main-banner.jpg);
    background-size: cover;
    color: #ffffff;
    padding: 0;

}
.jumbotron .intro{
    background: rgba(0, 0, 0,0.1);
    padding-top: 120px;
    padding-bottom: 40px;
    min-height: 400px;
}

.jumbotron .intro .row-top div.ccont{

}
.row-bottom{
    margin-top: 20px;
    margin-bottom: 20px;
}

.jumbotron div.ccont{
    background: #fff;
    min-height: 150px;
}
.jumbotron .row-top div.ccont{
    -webkit-box-shadow: 0px 1px 2px rgba(100, 100, 100, 0.75);
    -moz-box-shadow:    0px 1px 2px rgba(100, 100, 100, 0.75);
    box-shadow:         0px 1px 2px rgba(100, 100, 100, 0.75);

}

.jumbotron .row-bottom div.ccont{
    -webkit-box-shadow: -1px -1px 2px rgba(100, 100, 100, 0.75);
    -moz-box-shadow:    -1px -1px 2px rgba(100, 100, 100, 0.75);
    box-shadow:         -1px -1px 2px rgba(100, 100, 100, 0.75);

}

.jumbotron p{
    padding: 20px 0;
}

.jumbotron .media{
    margin: 50px 0;
}
.jumbotron .media-body h1{
    margin-top: 100px;
}

section.slider{
    color: #ffffff;
    background: #696969;
    margin: 40px 0;
    padding: 40px 0;
}

section.slider h2{
    margin-bottom: 20px;
}

section.slider .col-md-8{
    padding-left: 30px;
}

这是我的 HTML 代码

<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron" id="home">
    <div class="intro">
        <div class="container">

            <div class="row">
                <h1 class="text-center"><span style="font-size:1.9em;">W</span>eb<span style="font-size:1.9em;">I</span>nsight</h1>

                <p class="text-center">A Subsidiary of HustleBussell</p><br/>
            </div>
            <div class="row triangles">
                <div class="up-triangle animated fadeInUp">
                    <div class="info">

                        Search Engine Optimization
                    </div>
                </div>
                <div class="down-triangle animated fadeInDown">
                    <div class="info">

                        Web Development<br/>

                    </div>
                </div>
                <div class="up-triangle animated fadeInUp">
                    <div class="info">


                        Marketing
                    </div>
                </div>
                <div class="down-triangle animated fadeInDown">
                    <div class="info">

                        Systems Security<br/>

                    </div>
                </div>

                <div class="down-triangle animated fadeInDown visible-sm">
                    <div class="info">

                        Mobile App Development<br/>

                    </div>
                </div>

                <div class="up-triangle animated fadeInUp">
                    <div class="info">


                        Consulting
                    </div>
                </div>
                <div class="down-triangle animated fadeInDown">
                    <div class="info">

                        Branding<br/>

                    </div>
                </div>
                <div class="up-triangle animated fadeInUp">
                    <div class="info">


                        Growth Hacking
                    </div>
                </div>


            </div>

        </div>
    </div>
</div>

<section id="services">
<div class="container">
    <!-- Example row of columns -->
    <div class="row features inner-page">
        <div class="col-md-12 text-center">
            <h2>Amplify your Reach, Achieve Massive Results</h2>

            <p style="font-size:20px;">Many people believe they can build their brand and attract new clients by being active online only and engaging in marketing practices. This is only
                partially true. In order to take your brand to the next level, you have to start with unrealistic thinking. Unrealistic meaning that we execute beyond what most people believe is possible. This thinking involves the client being at the starting point of it all. Ground Zero. This is what we call "Client Zero Thinking". WebInsight
                takes you to the next level by engaging in "BackYard Marketing", generating sales leads and boosting revenue utilizing overlooked resources.</p>
        </div>
    </div>



</div>
</section>

<section class="slider" id="features">
    <div class="container">
        <div class="inner-page">
            <h2 class="text-center">About Us</h2>

            <p style="font-size:20px;" class="text-center">WebInsight is a creative marketing and technology company based in Chicago, Illinois. Our mission statement "Provide so much value
            that the cost paid for our services is nothing compared to the benefit" is what we live by. We honor our clients and therefore we provide the best solutions
            and services for your problems. Whether you're a company just starting or an already established business, we offer results oriented solutions to help you become a market leader.</p>
        </div>



        </div>
    </div>
</section>

Answer 1

在小提琴中我无法模拟问题，但我进入并检查了您的网站。问题是分别具有灰色背景的元素 .jumbotron .intro 包含三角形。

当您调整窗口大小时，三角形会出现两行，因此.info 的高度会变大并与下一个元素（白色元素）重叠。 你已经用visibility:hidden 隐藏了三角形(max-width: 1152px)，visibility:hidden 只隐藏了元素，但它们仍然占据空间。你应该使用display:none，这样元素就被隐藏了，它们不会占用空间

代码：

@media (max-width: 1152px)
.up-triangle, .down-triangle {
/* visibility: hidden; */
display: none!important;
}

添加了!important，因为你的css中也有这个：.visible-sm { display: block !important;}，它覆盖了代码。我建议你不要使用!important，除非你真的需要。

要阅读有关visibility 和display 之间区别的更多信息，请参阅此处what-is-the-difference-between-visibilityhidden-and-displaynone