Bootstrap 4 在移动屏幕尺寸上点击导航菜单切换器将内容下推

Question

当从 xs 或 sm viewport/screen 尺寸查看此内容，然后单击我的导航栏切换器时，它会推送所有内容，包括 navbar-toggler 所在的 header，在页面下方为下拉菜单腾出空间。

这似乎不同于 Bootstrap 3（以及 Bootstrap 4 alpha 5）。

关于如何停止这样做的任何想法？

这是要测试的站点... https://test.wrestlestat.com/rankings/dual

代码如下：

<button class="navbar-toggler d-md-none" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            @*<li class="nav-item"><a class="nav-link" href="@WrestleStat_v3.Core.Constants.Route.ComparisonRoutes.GetDualComparisonSelectLink()">Dual Comparison</a></li>*@
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="comparisonDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Comparisons
                </a>
                <div class="dropdown-menu" aria-labelledby="comparisonDropdown">
                    <a class="dropdown-item" href="@WrestleStat_v3.Core.Constants.Route.ComparisonRoutes.GetDualComparisonSelectLink()">Dual/Team</a>
                    <a class="dropdown-item" href="@WrestleStat_v3.Core.Constants.Route.ComparisonRoutes.GetWrestlerComparisonSelectLink()">Wrestler</a>
                    @*<div class="dropdown-divider"></div>*@
                    <a class="dropdown-item" href="@WrestleStat_v3.Core.Constants.Route.ComparisonRoutes.GetDualComparisonSelectLink()">Perma</a>
                </div>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="rankingsDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Rankings
                </a>
                <div class="dropdown-menu" aria-labelledby="rankingsDropdown">
                    <a class="dropdown-item" href="@WrestleStat_v3.Core.Constants.Route.RankingRoutes.GetWrestlerRankingsAllLink()">Wrestler</a>
                    <a class="dropdown-item" href="@WrestleStat_v3.Core.Constants.Route.RankingRoutes.GetDualRankingsLink()">Dual</a>
                    <a class="dropdown-item" href="@WrestleStat_v3.Core.Constants.Route.RankingRoutes.GetTournamentRankingsLink()">Tournament</a>
                </div>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="fantasyDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Comparisons
                </a>
                <div class="dropdown-menu" aria-labelledby="fantasyDropdown">
                    <a class="dropdown-item" href="@WrestleStat_v3.Core.Constants.Route.PickEmRoutes.GetFantasyThisWeekLink()">Pick'Em</a>
                    <a class="dropdown-item" href="@WrestleStat_v3.Core.Constants.Route.TourneyPoolRoutes.GetTourneyPoolHubLink()">Tourney Pool</a>
                    <a class="dropdown-item" href="@WrestleStat_v3.Core.Constants.Route.TourneyProjectionRoutes.GetTourneyProjectionLink()">Tourney Projection</a>
                </div>
            </li>
        </ul>
    </div>

Answer 1

为什么会这样？
class sticky-top 给你的导航栏一个 position: sticky; ，当你还没有滚动时它充当一个块元素。因此，当您的导航栏展开时，它会将所有其他块元素向下推。

Fix1 - 下推正常内容
将此 div: <div class="navbar-collapse collapse" id="navbarSupportedContent" style>...</div> 放在 <nav>...</nav> 的末尾，或者如果您希望搜索字段位于折叠的导航栏下方，则放在 input 上方。

Fix2 - 不向下推任何东西
首先执行 Fix1，然后在您的 CSS 中添加 .sticky-top { position: fixed !important; }，仅当您不使用 sticky-top 时才这样做！，因为当你不滚动时，它就像一个块元素，所以将它的其他内容向下推。还要为您的第一个 container-fluid 添加一些边距，使其再次位于 header 下方（因为现在的 fixed 元素不再占用 space ）例如添加 classes pt-5 和 mt-5 给他们。

Bootstrap 4 在移动屏幕尺寸上点击导航菜单切换器将内容下推

Bootstrap 4 clicking nav menu toggler on mobile screen size pushes content down

css

nav

twitter-bootstrap

bootstrap-4