Html 当我调整浏览器窗口的大小时，停止导航栏的移动_Html_Css_Twitter Bootstrap_Dom

Html 当我调整浏览器窗口的大小时，停止导航栏的移动

html css twitter-bootstrap dom

Html 当我调整浏览器窗口的大小时，停止导航栏的移动,html,css,twitter-bootstrap,dom,Html,Css,Twitter Bootstrap,Dom,我从一个同事那里接手了一个项目。我试图让导航栏在浏览器窗口变小时停止崩溃。我不擅长引导，所以我需要帮助下面是HTML和Javascript <body onresize="onResize()"> <div id="masterlayout" class="fixed-top"> <nav class="navbar navbar-expand-md navbar-da

我从一个同事那里接手了一个项目。我试图让导航栏在浏览器窗口变小时停止崩溃。我不擅长引导，所以我需要帮助

下面是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>

这是一张看起来很正常的照片。

当我最小化屏幕时，它就是这样做的。我希望它只是从屏幕上掉下来，而不是压缩自己。

我已经尝试直接在两个div以及nav和UL中输入

min width=“800px”

。什么都没用。我想我需要利用bootstrap来做这个或Javascript，我对这方面的知识还不够，但我愿意学习

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

您正在使用引导类

导航栏展开md

，它告诉浏览器在小于768px的屏幕上折叠导航-如果您将其更改为

导航栏展开

，它将阻止导航栏折叠。如果菜单选项不再适合屏幕宽度，它们将换行到第二行

如果要防止这种情况，可以在容器上设置最小宽度。但是请注意，由于nav使用的是

固定顶部

类，因此它具有

位置：固定

，这意味着在较小的设备上，最右边的项目将脱离屏幕，用户无法访问它们。您需要删除固定定位，或者可以在导航中添加滚动条（但这既难看又笨拙）

使用导航栏展开的工作代码段：

.container{
最大宽度：800px；
左边距：0px；
/*如果要防止项目包装到
第二行，当它们不再适合车窗时：
最小宽度：500px；
*/
}


神圣的


主页
站点管理员
促销活动
报告
登录

您是否使用柔性包装：包装；容器块中的属性？

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