Question

从xs或sm视口/屏幕尺寸查看此内容，然后单击我的导航栏切换器时，它会将所有内容（包括导航栏切换器所在的标题）推到页面下方，为下拉菜单腾出空间

这似乎与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

为什么会这样？
类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添加一些余量，使其再次位于标题下（因为现在fixed元素不再占用空间）例如添加类pt-5和{{1}对他们来说。

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

1 个答案: