在頁面的標題和徽標的同一級別上顯示導航欄

我使用低於徽標和頁面標題的引導程序創建了一個導航欄。在頁面的標題和徽標的同一級別上顯示導航欄

但是，當涉及到更小的設備（手機），我喜歡把倒塌的導航欄上同一級別我的標題和標誌是，但我無法弄清楚如何做到這一點。以下是我迄今爲止：

<div id="menu" class="navbar navbar-inverse" role="navigation"> 
    <h1 style="text-align: center;margin-top:0;"> 
    <a href="#/" style="color:white;text-decoration:none"> 
     <img id="logo" src = "images/logo.svg" width="20px"> 
    </a> 
    <a id="title" href="#/" style="color:white;font-family: fantasy;text-decoration:none">Title of the page </a> 
    </h1> 
    <div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 
    </div> 

    <div class="collapse navbar-collapse" id="js-navbar-collapse" ng-controller="HeaderCtrl"> 
    <ul class="nav navbar-nav" > 
     <li ng-class="{ active: isActive('/about') }"><a href="#/about">aa</a></li> 
     <li class="dropdown"> 
     <a href="#" data-toggle="dropdown" class="dropdown-toggle">bb<b class="caret"></b></a> 
     <ul class="dropdown-menu"> 
      <li><a href="#">aa</a></li> 
      <li><a href="#">bb</a></li> 
      <li><a href="#">cc</a></li> 
     </ul> 
     </li> 
     <li ng-class="{ active: isActive('/aa') }"><a href="#/aa">cc</a></li> 
     <li ng-class="{ active: isActive('/dd') }"><a href="#/dd">dd</a></li> 
     <li ng-class="{ active: isActive('/ee') }"><a href="#/ee">ee</a></li> 
    </ul> 
    </div> 
</div>

這裏是我的小片段：https://jsfiddle.net/Lasjo4xz/3/

來源

2016-01-30 krakig

試試這個代碼

@media (max-width: 767px) { 
    h1 { 
     position: absolute; 
     left: 0; 
     right: 0; 
    } 
    ... 
}

的position:absolute將使頭（H1與img）失去它的佔用空間，所以它可以在導航div上面。我覺得這是一個簡單的解決方案，因爲如果你想浮動navbar div，它可能會導致寬度問題

left:0; and right:0;確保元素水平居中。

來源

2016-01-30 20:00:48 Aziz

如何感謝你，它的作品就像一個魅力！也感謝解釋，我是一個完全的CSS小白，但我想明白！ – krakig

樂意幫忙！請點擊票數下的複選標記繼續接受答案。祝你有個美好的一天，祝你好運 – Aziz

這裏有一個快速和簡單的解決辦法：

@media (max-width: 767px) 
    #menu { 
     display: flex; 
     justify-content: center; 
    }

的h1是塊元素。這意味着它始終佔用容器的全部可用寬度。

對於包含菜單圖標的div也是如此。

它們位於不同的行（垂直堆疊），因爲它們都是塊元素。

您可以嘗試在媒體查詢中將它們切換爲inline-block。這將排隊在一起。或者你可以使用flex。

來源

2016-01-30 20:02:28

在頁面的標題和徽標的同一級別上顯示導航欄

回答

相關問題