html - Bootstrap 4 容器重叠前一个容器

问题描述

我在一个接一个放置的容器与移动设备上的前一个容器重叠时遇到了麻烦。特别是 S5 或 iPhoneX 或以下的显示器尺寸。第一个容器包含一些嵌套的行和偏移列，所以并不简单。该media-featured-wrapper容器与移动设备上的前一个容器重叠homepage_header。如果我删除media-featured-wrapper容器，下一个元素会重叠，所以这可能是我无法弄清楚的第一个容器的问题。任何想法，将不胜感激。（这是在 Modx 上，因此是方括号）谢谢！

<div class=" container-fluid px-0 homepage_header border-bottom">
    <div class="row h-100 no-gutters">
        <div class="d-none d-lg-block col-md-4 homepage_header_left">
            <div class="col-md-9 offset-md-3 pt-4 text-center">
                <picture class="img-fluid">
                    <source srcset="[[++assets_url]]hp_logo_w_text.svg" type="image/svg+xml">
                    <source srcset="[[++assets_url]]hp_logo_w_text.png" type="image/png"> 
                    <img src="[[++assets_url]]hp_logo_w_text.png" class="img-fluid my-auto" alt="">
               </picture>
            </div>
        </div>
        <div class="col-md-12 col-lg-8 homepage_header_right">
            <div class="d-none d-lg-block">
                [[pdoMenu?
                    &startId=`0`
                    &level=`2`
                    &tplOuter=`HPNav.outerTpl`
                    &tplInner=`HPNav.innerTpl`
                    &tplParentRow=`HPNav.parentRowTpl`
                    &tplInnerRow=`HPNav.innerRowTpl`
                    &tpl=`HPNav.rowTpl`
                    &fullLink=`TRUE`
                    &excludeDocs=`1`
                ]]
            </div>
            <picture class="d-block d-lg-none img-fluid mt-0">
                <source srcset="[[++assets_url]]img/hp_mobile_logo.webp" type="image/webp">
                <source srcset="[[++assets_url]]img/hp_mobile_logo.png" type="image/png"> 
                <img src="[[++assets_url]]img/hp_mobile_logo.png" class="d-block d-lg-none img-fluid mt-0" alt="Activate Body Logo">
            </picture>
            <div class="row">
                <div class="col-lg-9 col-md-10 offset-md-2 offset-lg-0">
                    <h2 class="g-highlight d-block d-lg-none">Text</h2>
                    <h2 class="highlight d-none d-lg-inline">Text</h2>
                    <h1 class="b_hp_header_text mb-5 mt-2">Text</h1>
                    <a href="#contact" class="btn btn-success btn-lg my-0 px-4 text-center" roll="button">TEXT!</a>
                 </div>
            </div>
        </div>
    </div>   
</div>

<div class="container-fluid media-featured-wrapper border-bottom">
    <div class="row">
        <div class="col-sm-12 text-center">
            <span class="sr-only">As Featured In</span>
            <ul class="list-inline media_featured text-center mx-auto" role="list">
                <li class="list-inline-item img-fluid" role="listitem"><img src="[[++assets_url]]img1.png" class="img-fluid" alt=""></li>
                <li class="list-inline-item img-fluid" role="listitem"><img src="[[++assets_url]]img2.png" class="img-fluid" alt=""></li>
                <li class="list-inline-item img-fluid" role="listitem"><img src="[[++assets_url]]img3.png" class="img-fluid" alt=""></li>
            </ul>   
        </div>
    </div>
</div>

相关 CSS

.homepage_header {
  height: 640px;
  margin-bottom:0px;
}

.homepage_header_left {
    background-color: #005a8a;  
    background: rgba(0,112,168,1);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0,112,168,1)), color-stop(50%, rgba(0,99,148,1)), color-stop(100%, rgba(0,90,138,1)));
    background: -o-linear-gradient(left, rgba(0,112,168,1) 0%, rgba(0,99,148,1) 50%, rgba(0,90,138,1) 100%);
    background: -webkit-gradient(linear, left top, right top, from(rgba(0,112,168,1)), color-stop(50%, rgba(0,99,148,1)), to(rgba(0,90,138,1)));
    background: linear-gradient(to right, rgba(0,112,168,1) 0%, rgba(0,99,148,1) 50%, rgba(0,90,138,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0070a8', endColorstr='#005a8a', GradientType=1 );   
    padding-top: 0px;
    padding-bottom: 0px;
    padding-right:20px!important;
    text-align: center;
    height: 100%;
}

.homepage_header_left img, .homepage_header_left picture {
    max-height: 585px;
}

.homepage_header_right {
    padding-top: 1rem;
    text-align: left;
    padding-right: 2rem!important;
    padding-left: 2rem!important;
    height: auto;
}
/* For Modernizer.js */
.no-webp .homepage_header_right {
    padding-top: 1rem;
    text-align: left;
    padding-right: 2rem!important;
    padding-left: 2rem!important;
    background-image: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,0) 20%, rgba(255,255,255,0) 100%), url('../img/hp_gym_right.jpg');
    background-image: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255) 20%,rgba(255,255,255,0) 100%), url('../img/hp_gym_right.jpg');
    background-image: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255) 20%,rgba(255,255,255,0) 100%), url('../img/hp_gym_right.jpg'); 
    background-size: cover;
}

.webp .homepage_header_right {
    padding-top: 1rem;
    text-align: left;
    padding-right: 2rem!important;
    padding-left: 2rem!important;
    background-image: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,0) 20%, rgba(255,255,255,0) 100%), url('../img/hp_gym_right.webp');
    background-image: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255) 20%,rgba(255,255,255,0) 100%), url('../img/hp_gym_right.webp');
    background-image: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255) 20%,rgba(255,255,255,0) 100%), url('../img/hp_gym_right.webp'); 
    background-size: cover;
}

.b_hp_header_text {
    font-family: 'Montserrat', arial, sans-serif;
    font-weight: 700;
    font-size: 3.5rem;
    color: #000000;
    text-transform:capitalize;
}

/*--- FEATURED MEDIA ---*/
.media-featured-wrapper {
    margin-bottom:20px;
    height:auto;
}

.media_featured ul{
    width: 100%;
    margin: 0;
    padding: .5em 0;
    color: #bfbfbf;
    font-size: .63em;
    border-spacing: 3px;
    border-collapse: separate;
}
.media_featured li img {
    max-height: 30px;
    margin: 15px 15px 0px 15px;
    vertical-align: middle;
}

.media_featured ul li {
    max-width: 200px;

}

标签： htmlcsstwitter-bootstrapbootstrap-4

html - Bootstrap 4 容器重叠前一个容器

问题描述

解决方案

推荐阅读