如何制作响应式导航栏？

Question

如何制作响应式导航栏，而不会覆盖页面顶部？我正在使用百万美元框架和twitter bootstrap。

我的导航代码

<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，看看是否能解决您的问题。