我正在使用bootstrap设计网站。我陷入了这个小问题。我想删除图像下方的多余空间。我正在使用bootstrap类和scss。我知道这是一个很小的问题,但它确实可以节省我的时间,如果有人纠正我,我在做错什么。只需要一点帮助。

不需要的空间区域:

html5 -  bootstrap 中两行以下的巨大空间-LMLPHP

引导代码:

 <section class="homepage-banner-section">

            <div class="container">
                <div class="row">
                    <div class="col-lg-4 col-md-4">
                         <div style="height: 67%;">
                            <img src="img/home-banner-one.png" class="img-fluid mh-100" style="width: 100%; height: 100%;" alt="Responsive image">
                         </div>
                    </div>
                    <div class="col-lg-8 col-md-8">
                        <div class="row">
                            <div class="col-12">
                                <div class="therapy-text-wrapper">
                                    <h2 class="therapy-text text-center">Start you therapy now!</h2>
                                </div>
                            </div>
                            <div class="col-12">

                                <div style="height: 60%;">
                                    <img src="img/home-banner-two.png" class="img-fluid mh-100" style="width: 100%; height: 100%;" alt="Responsive image">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <div class="anxiety-text-wrapper">
                            <h2 class="anxiety-text text-center">Anxiety is very common:<br>
                            worldwide 1 in 14 people <br>
                            have disabling anxiety.</h2>
                        </div>
                    </div>
                </div>
            </div>

        </section>


SCSS:

.homepage-banner-section{

    padding-top: 2%;

    .therapy-text-wrapper{

        .therapy-text{

            background-color: $baby-blue;
            color:$white;
            text-align: center;
            padding: 3% 0;

        }
    }

    .anxiety-text-wrapper{
        text-align: center;
        padding: 2% 0;

        .anxiety-text{

            background-color: $baby-blue;
            color:$white;
            text-align: center;
            padding: 3% 0;
            font-family: Merriweather-Italic;
            font-style: italic;

        }
    }
}

最佳答案

图像的位置使您的div高度混乱。您可以尝试在焦虑部分添加margin-top: -100px;来显示它。

SASS:

.homepage-banner-section {

    padding-top: 2%;

    .therapy-text-wrapper {

        .therapy-text {

            background-color: $baby-blue;
            color:$white;
            text-align: center;
            padding: 3% 0;

        }
    }

    .anxiety-text-wrapper {
        margin-top: -100px;
        text-align: center;
        padding: 2% 0;

        @include media-breakpoint-down(md) {
            margin-top: -10px;
            // Change or disable the margin here for anything smaller than a medium screen
        }

        .anxiety-text {

            background-color: $baby-blue;
            color:$white;
            text-align: center;
            padding: 3% 0;
            font-family: Merriweather-Italic;
            font-style: italic;

        }
    }
}

07-24 09:50
查看更多