引导程序中两行以下的巨大空间 [英] Huge Space Below Two Rows in Bootstrap

问题描述

我正在使用bootstrap设计网站.我被困在这个小问题上.我想删除图像下方的多余空间.我正在使用bootstrap类和scss.我知道这是一个很小的问题，但是它如果有人纠正我我做错了什么，那将真的节省我的时间.只需一点帮助.

I am making design of my site in bootstrap.I am stuck at this small issue.I want to remove the unwanted space below the images.I am using bootstrap classes and scss.I know this is a very small issue but it will really save my time if someone correct me what i am doing something wrong.Just a little help required.

不需要的空间区域:

引导代码:

 <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;来显示它.

The image positioning is messing with the div heights you have here. You can try adding a margin-top: -100px; to your anxiety section to bring it up.

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;

        }
    }
}

这篇关于引导程序中两行以下的巨大空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！