调整浏览器窗口大小时，阻止导航栏移动

问题描述

我要从一个同事那里接管一个项目。我正在尝试使Navbar在浏览器窗口变小时停止折叠。我不擅长Bootstrap，因此需要帮助。

这是HTML和Javascript。

<body  onresize="onResize()">
    <div id="masterlayout" class="fixed-top">
        <nav class="navbar navbar-expand-md navbar-dark bg-dark">
            <h1 class="navbar-brand d-flex align-items-center">Divine</h1>
            <div class="container">
                <ul class="nav navbar-nav">
                    <li></li>
                    <li class="nav-item nav-link mx-1">@Html.ActionLink("Home","Index","Home")</li>
                    @if (1 == 1)
                    {
                        <li class="nav-item nav-link mx-1">@Html.ActionLink("Site Admin","RegisterUsers","SiteAdmin")</li>
                    }
                    <li class="nav-item nav-link mx-1">@Html.ActionLink("Promotional","Promotional","Promotional")</li>
                    <li class="nav-item nav-link mx-1">@Html.ActionLink("Reports","Contact","Home")</li>
                </ul>
            </div>
            @Html.Partial("_LoginPartial")
        </nav>
        <div style="background-color: darkgray; width: 100%; height: 10px;">


        </div>

    </div>
    
    <div id="content1">
        @RenderBody()
    </div>
</body>
</html>
<script type="text/javascript">
    $(document).ready(function () {
        var height = document.getElementById("masterlayout").offsetHeight;
        document.getElementById("content1").style.marginTop = height - 1 + 'px';
    });
    $(document).ready(function () {
        var height = document.getElementById("masterlayout").offsetHeight;
        document.getElementById("menu").style.marginTop = height - 1 + 'px';
    });

    function onResize() {
        var height = document.getElementById("masterlayout").offsetHeight;
        document.getElementById("content1").style.marginTop = height - 1 + 'px';
    }
    function onResize() {
        var height = document.getElementById("masterlayout").offsetHeight;
        document.getElementById("menu").style.marginTop = height - 1 + 'px';
    }
</script>

这是CSS部分。

.container {
    max-width:800px;
    margin-left:0px;
}

这里是正常情况的图片。

这是我最小化屏幕时的操作。我希望它只是从屏幕上掉下来而不是自身压缩。

我尝试直接在div和nav和UL中都输入<style> min-width="800px"</style>。没事。我以为我需要利用引导程序来执行此操作或使用Javascript，对此我还不了解，但是我愿意学习！

结果我希望浏览器窗口能够最小化，并且导航栏在较长时保持原样，并且不要环绕并降低自身。

解决方法

您正在使用Bootstrap类navbar-expand-md，该类告诉浏览器在小于768px的屏幕上折叠导航栏-如果将其更改为navbar-expand，它将阻止导航栏折叠。如果菜单选项不再适合屏幕宽度，则它们将换行到第二行。

如果要防止这种情况，可以在容器上设置最小宽度。但是请注意，由于导航使用fixed-top类，因此它具有position:fixed的意思是，在较小的设备上，大部分装备会显示在屏幕上，并且用户无法访问他们。您将需要删除固定位置，或者可以在导航栏中添加滚动条（但这很丑陋且笨拙）。

带有导航栏扩展的代码段：

.container {
    max-width:800px;
    margin-left:0px;

    /* IF YOU WANT TO PREVENT THE ITEMS WRAPPING ONTO A 
       2ND LINE WHEN THEY NO LONGER FIT IN THE WINDOW:
    min-width:500px;
    */
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<body>
    <div id="masterlayout" class="fixed-top">
        <nav class="navbar navbar-expand navbar-dark bg-dark">
            <h1 class="navbar-brand d-flex align-items-center">Divine</h1>
            <div class="container">
                <ul class="nav navbar-nav">
                    <li></li>
                    <li class="nav-item nav-link mx-1">Home</li>
                    <li class="nav-item nav-link mx-1">Site Admin</li>
                    <li class="nav-item nav-link mx-1">Promotional</li>
                    <li class="nav-item nav-link mx-1">Reports</li>
                    <li class="nav-item nav-link mx-1">Login</li>
                </ul>
            </div>
        </nav>
        <div style="background-color: darkgray; width: 100%; height: 10px;">

        </div>

    </div>
</body>

参考：Bootstrap Navbar

dom html twitter-bootstrap