我試圖讓我的引導導航欄在頁面內容前面展開。目前，當視口變得足夠小并且它折疊成漢堡包切換時，在擴展時它會將頁面內容向下移動。我希望它在內容前面擴展，而不是將所有內容都向下移動。我看到一些類似的帖子說你可以使用添加到導航欄的“固定頂部”類來實現這一點 - 我嘗試過，它確實有效，但我寧愿不讓導航欄固定頂部，并且無法弄清楚如何讓它在前面展開而不是固定在頂部。我對 HTML/CSS 比較陌生，所以如果我在這里遺漏了一些值得注意的東西，我深表歉意。代碼如下。<section class="navigation"> <nav class="navbar navbar-expand-lg navbar-dark"> <a class="navbar-brand" href="index.html"><img class="home_icon" src="Home_icon.png"></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link" href="shows.html">SHOWS <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="music.html">MUSIC</a> </li> <li class="nav-item"> <a class="nav-link" href="contact.html">CONTACT</a> </li> <li class="nav-item"> <a class="nav-link" href="about.html">ABOUT</a> </li> </ul> </div> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="https://facebook.com/sweetchicle"><i class="fab fa-facebook-f social-icon"></i></a> </li> <li class="nav-item"> <a class="nav-link" href="https://twitter.com/sweetchicleband"><i class="fab fa-twitter social-icon"></i></a> </li> <li class="nav-item"> <a class="nav-link" href="https://www.instagram.com/sweetchiclemusic/"><i class="fab fa-instagram social-icon"></i></a> </li> </ul> </div> </nav> </section>
1 回答
鳳凰求蠱
TA貢獻1825條經驗 獲得超4個贊
您可以使部分的位置絕對并使用容器流體來填充視口的寬度。還需要 z 索引來實現導航功能并顯示在其他內容之上。嘗試將以下內容應用于開頭部分標簽：
<section class="navigation position-absolute container-fluid" style="z-index: 1;">
- 1 回答
- 0 關注
- 161 瀏覽
添加回答
舉報
0/150
提交
取消