Question

当我将以下代码添加到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>

Answer 1

尽管我希望找到一个真正的解决方案，但我已经找到了一种使它正常工作的方法。

基本上，我只是将所有flexbox内容扔进了媒体查询中，如下所示：

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

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

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

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

再次，我认为这是一个骇人听闻的解决方案，但它确实有效。

Flexbox粘性页脚在移动设备上破坏了我的导航栏

1 个答案: