如何製作響應式導航欄？

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> 

因爲我使用Twitter的引導，我沒有爲這部分多CSS。

的CSS

#logo 
{ 
display:inline-block; 
} 

這裏是擋住了我的頁面圖像。

Answer 1

拿出類navbar-fixed-top看看是否解決了你的問題。