时间戳

首页 > 解决方案 > Flexbox Sticky Footer 破坏了我在移动设备上的导航栏

css - Flexbox Sticky Footer 破坏了我在移动设备上的导航栏

问题描述

当我将以下代码添加到我的 CSS 时，它只会破坏我在移动设备上的导航栏：

body {
    display: flex;
    flex-direction: column;
}

#page-content {
    flex: 1 0 auto;
}

#footer-container {
    flex-shrink: 0;
}

在桌面上，我的导航栏在展开时可以完美运行。它按应有的方式将所有页面内容向下推。

在移动设备上，它仍在扩展，但不会将页面内容向下推。它甚至不保留其背景颜色。它只是在没有背景的情况下向下扩展导航链接。

我正在使用引导程序 4.4.1。这是一个非常通用的导航栏。我删除了下面的导航栏代码。

一旦我从我的 CSS 中删除了上面的 4 行，我的导航就可以在移动设备上完美运行。我只是没有粘性页脚了。

<nav class="mb-0 navbar navbar-expand-lg">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-555" aria-controls="navbarSupportedContent-555" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent-555">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item">
                    <a class="nav-link" href="/">Home</a>
                </li>
            </ul>
            @Html.Partial("_LoginPartial")
        </div>
    </nav>

标签： cssasp.net-mvcbootstrap-4flexbox

解决方案

尽管我希望有一个真正的解决方案，但我找到了一种让它工作的hacky方法。

基本上，我只是将所有 flexbox 的东西都扔到了媒体查询中，如下所示：

@media (min-width: 992px) {
    body {
        display: flex;
        flex-direction: column;
    }

    #page-content {
        flex: 1 0 auto;
    }

    #footer-container {
        flex-shrink: 0;
    }
}

因此，它在导航栏未折叠时使用 flexbox，然后当它折叠时，停止使用 flexbox 的东西。这对我来说非常有效，因为我所有的页面都有足够的内容，我的页脚总是在移动设备的底部。

同样，我认为这是一个 hacky 解决方案，但它有效。

推荐阅读