调整浏览器窗口大小时停止导航栏移动答案

【问题标题】：Stop my Navbar from shifting when I resize the browser window调整浏览器窗口大小时停止导航栏移动
【发布时间】：2020-12-15 19:17:02
【问题描述】：

我要接手同事的一个项目。当浏览器窗口变小时，我试图让导航栏停止折叠。我不精通 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、导航和 UL 中直接输入 <style> min-width="800px"</style>。没有任何效果。我在想我需要使用引导程序或 Javascript 来执行此操作，我对此了解的不够多，但我愿意学习！

结果我希望浏览器窗口能够最小化，并且导航栏保持较长时的状态，而不是环绕和降低自身。

【问题讨论】：

你在使用 flex-wrap: wrap;容器块中的属性？

标签： html css twitter-bootstrap dom

【解决方案1】：

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

如果你想防止这种情况，你可以在你的容器上设置一个最小宽度。但是请注意，由于导航使用fixed-top 类，它具有position:fixed，这意味着在较小的设备上，大多数装备的项目将在屏幕外，并且用户无法访问它们。您需要移除固定位置，或者您可以在导航中添加滚动条（但这很丑陋且笨拙）。

使用 navbar-expand 的工作片段：

.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

【讨论】：