Bootstrap 4使導航欄項目始終在小屏幕上擴展且沒有按鈕

Question

我正在網站腳注上工作，正在尋找一種制作導航器的方法，該導航器將所有物品在大屏幕上排成一排，然后在小屏幕上折疊成多排。 崩潰發生的很好，但是我無法找出一種方法來：

a）自動顯示行，直到單擊切換按鈕時才隱藏行

b）完全消除切換按鈕

我當前的代碼：

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> <nav class="navbar navbar-dark bg-dark navbar-expand-xl py-0" id="footerBar"> <div class="collapse navbar-collapse" id="navbarColor03"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link" href="#" target="_blank">link1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">link2</a> </li> </ul> </div> </nav> 

目前，沒有按鈕就無法折疊（顯然是因為我已將其刪除）。 有沒有一種簡單的方法可以使其默認擴展到較小的屏幕？

Answer 1

弄清楚了...

需要將“ show”類應用於折疊（ID為navbarColor03的div）。

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> <nav class="navbar navbar-dark bg-dark navbar-expand-xl py-0" id="footerBar"> <div class="collapse navbar-collapse show" id="navbarColor03"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link" href="#" target="_blank">link1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">link2</a> </li> </ul> </div> </nav>