Question

我需要增加标题的字体大小，但是这样做也会改变ma home标语的高度。这会在右边的图像上产生间隙，该间隙不应该出现在该间隙中，因为该图像应该与首页横幅的下限接触。

正确但较小的文字：

不正确但大文本：

HTML：

<div class="container-fluid my_header_bg_color">

    <header class="my_header_bg_color">
        <br>
        <br>


        <div class="row">

            <div class="col-md-6">

                <div class="my_custom_banner_left">

                    <p class="my_title_banner">Stickers personalizados</p>


                    <p>Fáciles de ordenar por internet, diseño de conceptos gratis, envíos rápidos </p>

                </div>

                <div class="row my_bottom_margin">


                    <div class="col-md-1"></div>
                    <div class="col-md-5">

                        <a href="stickers" class="btn btn-azul text-white btn-block">Comprar</a>

                    </div>

                    <div class="col-md-5">

                        <a href="{% url 'shop:SamplePackPage' %}" class="btn btn-naranja text-white btn-block">Muestras
                        </a>


                    </div>



                </div>
            </div>

            <div class="col-md-6 ml-auto">

                <img class="my_image_banner my_image_padding" src="{% static 'img/banner-home2.png' %}">

            </div>

        </div>




    </header>

</div>

CSS：

.my_title_banner {
    font-size: 40px;
    font-weight: bold;
    color: white;
    margin-bottom: 0px;
}

.my_header_bg_color {
    background-color: #00A388;
}

.my_custom_banner_left {
    margin-left: 50px;
    padding-bottom: 0px;
}

Answer 1

只需定义横幅的高度：

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

或者，如果您希望横幅广告的高度可变，则可以确保图像与横幅广告的底部保持齐平，如下所示：

.my_title_banner {
    height:400px;
    font-size: 40px;
    font-weight: bold;
    color: white;
    margin-bottom: 0px;
}

CSS：在增加文字大小的同时保持横幅的高度

1 个答案: