刪除/關閉頁腳導航中的切換折疊

Question

我是使用引導程序的新手，並且正在嘗試向我的投資組合添加頁腳社交導航 - 我嘗試刪除不同的類並嘗試使用粘性頁腳，但它不適合我正在設計的內容。 頁腳導航在桌面上顯示得很好，但是一旦我將其調整為平板電腦/手機，它就會顯示漢堡菜單（當然，它不會打開）-我只有社交圖標而沒有文本，因此它們應該適合頁腳。 如何防止漢堡菜單顯示在較小的屏幕上？ 這是我的頁腳代碼：

 <footer> <nav class="navbar navbar-expand-lg navbar-dark navigation-bg bottom"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse justify-content-center"> <ul class="navbar-nav footer-social"> <li class="nav-item active"> <a href="https://www.instagram.com/emquebuena"><i class="fab fa-instagram instagram"></i></a> </li> <li class="nav-item"> <a href="https://github.com/emkaygru"><i class="fab fa-github github"></i></a> </li> <li class="nav-item"> <a href="https://codepen.io/emkaygru"><i class="fab fa-codepen codepen"></i></a> </li> <li class="nav-item"> <a href="https://vm.tiktok.com/ZMJAqMJ5m/"><i class="fab fa-tiktok tiktok"></i></a> </li> </ul> </div> </nav> </footer>

Answer 1

默認情況下隱藏漢堡包並將其設置為在更大的顯示器上顯示。

.navbar-toggler {
    display: false;
}

@media (min-width: 1024px) {
    .navbar-toggler {
        display: block;
    }
}

Answer 2

在你的風格中添加這個：

/* Here 500px is small screen size. change it as per your requirement */

@media screen and (max-width: 500px){
    .navbar-toggler {
        display: none;
    }
}