html - Bootstrap - 页脚有两个 div，希望它们堆叠

Question

我尝试用谷歌搜索这个问题，但没有找到与我的问题相关的任何示例。我的问题如下:我有一个页脚(带填充)。在此页脚中，最左侧有一个文本，最右侧有一个文本。

我所拥有的:当我缩小窗口时，最终文本将相互重叠，并在页脚下方创建一个空白区域 - 文本会从该空白区域中掉出来。

我想要的:在某个时刻，两个 div 会“堆叠”在彼此下方，以便文本在较小的格式上保持可读性，并且不会创建额外的空白。

这是我的网站(我在 BitBalloon 上快速上传):删除了链接

页脚 HTML 代码:

<footer>
            <div class="row footer">
                <div class="aboutMe col-xs-6" p>
                    <span class="footerName">Temp Name</span>
                    <br><br>
                    <span class="footerDev">
                        Full Stack Web Developer
                        <br><br>
                        Responsive Designs
                    </span>
                </div>


                <div class="contactMe col-xs-6">
                    <span class="footerName">Contact</span>
                    <br><br>
                    <span class="footerDev">
                        <span><i class="icon ion-email"></i><a href="mailto:<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="44213c2529342821042329252d286a272b29" rel="noreferrer noopener nofollow">[email protected]</a>?Subject=Question%20regarding%20your%20website" target="_top"> <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="14716c7579647871547379757d783a777b79" rel="noreferrer noopener nofollow">[email protected]</a></a></span><br>
                        <span><i class="icon ion-android-call"></i><a href="#"> (+31) 1 2345 1234</a></span><br>
                        <span><i class="icon ion-social-linkedin"></i><a href="#" target="_blank"> LinkedIn</a></span><br>
                        <span><i class="icon ion-social-github"></i><a href="#" target="_blank">Github</a></span><br>
                    </span>
                </div>
            </div>
        </footer>

页脚CSS代码:

.row {
    padding: 0;
    margin: 0;
}
.footer {
    height: 250px;
    padding: 50px 0;
    background-color: #1A4862;
    width: 100%;
    text-align: center;
    color: #fff;
}

.aboutMe {
    height: 100%;
    padding-top: 20px;
}

.contactMe {
    height: 100%;
    padding-top: 20px;
}

.footerName {
    font-size: 30px;
}

.footerDev {
    font-size: 20px;
}

.footer a {
    color: #fff
}

Answer 1

只需更改您的类以仅允许 medium屏幕设备:

<footer>
    <div class="row footer">
        <div class="aboutMe col-md-6" p>
            <span class="footerName">Temp Name</span>
            <br><br>
            <span class="footerDev">
                Full Stack Web Developer
                <br><br>
                Responsive Designs
            </span>
        </div>


        <div class="contactMe col-md-6">
            <span class="footerName">Contact</span>
            <br><br>
            <span class="footerDev">
                <span><i class="icon ion-email"></i><a href="mailto:<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d1b4a9b0bca1bdb491b6bcb0b8bdffb2bebc" rel="noreferrer noopener nofollow">[email protected]</a>?Subject=Question%20regarding%20your%20website" target="_top"> <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0a6f726b677a666f4a6d676b636624696567" rel="noreferrer noopener nofollow">[email protected]</a></a></span><br>
                <span><i class="icon ion-android-call"></i><a href="#"> (+31) 1 2345 1234</a></span><br>
                <span><i class="icon ion-social-linkedin"></i><a href="#" target="_blank"> LinkedIn</a></span><br>
                <span><i class="icon ion-social-github"></i><a href="#" target="_blank">Github</a></span><br>
            </span>
        </div>
    </div>
</footer>

在 CSS 中，请删除 height页脚:

<罢工>

<罢工>

height: 250px;

<罢工>

或者，如果您需要设置height，则可能是这样。 ，考虑使用 min-height 设置它:

min-height: 250px;