當我調整瀏覽器窗口大小時，阻止我的導航欄移動

Question

我正在從同事那里接手一個項目。 當瀏覽器窗口變小時，我試圖讓導航欄停止折疊。 我不精通 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，我對此知之甚少，但我願意學習！

結果我希望瀏覽器窗口能夠最小化，並且導航欄在它很長時保持原樣，而不是環繞和降低自身。

Answer 1

您正在使用 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 導航欄

當我調整瀏覽器窗口大小時，阻止我的導航欄移動

問題描述

1 個解決方案

解決方案1
1 已采納 2020-08-27 01:22:22

當我調整瀏覽器窗口大小時，阻止我的導航欄移動

問題描述

1 個解決方案

解決方案1 1 已采納 2020-08-27 01:22:22

解決方案1
1 已采納 2020-08-27 01:22:22