如何制作響應式導航欄？

Question

如何制作一個響應式導航欄，使其不覆蓋頁面的頂部？ 我正在使用thymeleaf框架和twitter引導程序。

我的導航代碼

<div th:fragment="header">
  <div class="navbar navbar-inverse navbar-fixed-top" style="background-color:black;">
    <div class="container">
      <div class="navbar-header">
         <div id="logo"><img th:src="@{/images/bg.jpg}" /></div>
       </div>
       <div class="navbar-collapse collapse">
         <ul class="nav navbar-nav">
           <li class="active"><a th:href="@{/}">Home</a></li>
         </ul>
       </div>
     </div>
   </div>
 </div>

我這部分沒有太多的CSS，因為我使用的是Twitter Bootstrap。

的CSS

#logo
{
display:inline-block;
}

這是一張阻止我的頁面的圖像。

Answer 1

取出navbar-fixed-top ，看看是否能解決您的問題。