如何製作響應式導航欄？

Question

這裏是我的導航欄：

<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="/"><img src="/img/logo.png"></a> 
    </div> 

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="/item1/">LONG<br>ITEM1</a></li> 
     <li><a href="/item2/">LONG<br>ITEM 2</a></li> 
     <li><a href="/item3/">LONG<br>ITEM 3</a></li> 
     <li><a href="/item4/">LONG<br>ITEM 4</a></li> 
     <li><a href="/item5/">LONG<br>ITEM 5</a></li> 
     </ul> 
    </div> 
    </div> 
</nav> 

和css：

.navbar { 
    min-height: 100px; 
    font-family: 'Roboto Condensed', sans-serif; 
    font-size: 25px; 
    margin-bottom: 0px; 
    padding: 0px 70px; 
} 


.navbar-brand>img { 
    height: 70px; 
} 

.navbar-brand { 
    padding-top: 15px; 
    padding-bottom: 15px; 
} 

.navbar-default { 
    background: #5aa0d1; 
    border-radius: 0; 
    -webkit-box-shadow: none; 
      -box-shadow: none; 
    border: 0; 
} 

.navbar-default .navbar-brand { 
    color: #fff14f; 
} 

.navbar-default .navbar-nav > li > a { 
    color: #fff14f; 
    line-height: 24px; 
    padding-top: 28px; 
} 

.navbar-default .navbar-nav>li.active>a { 
    color: #ffffff; 
    background-color: transparent; 
} 

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover { 
    color: #ffffff; 
    background-color: transparent; 
} 


.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover { 
    color: #ffffff; 
} 

它不能很好地在小型設備（的iPad，iPhone，Android設備）中顯示 - 一些導航欄元素疊加他人（見實例如在vkko.ru）。

那裏有什麼問題？我應該如何解決這個問題？

Answer 1

我可以在這裏看到兩個問題，因爲你沒有詳細說明你想要修正的問題。

當您打開漢堡菜單時，徽標對於xs屏幕來說太大，分隔符會覆蓋徽標。我注意到您正在使用圖片作爲徽標，因此您並不需要使用navbar品牌，因爲該類爲基於文本的徽標添加了不必要的CSS，您可以簡單地使用左拉類。

<a class="pull-left" href="/"><img src="/img/logo.png"></a> 

另一種是字體尺寸過大，並因此推動的鏈接列表時的下一行上更小的裝置。您可以使用「媒體查詢」來檢測用戶是否在較小的設備上並相應地調整字體大小，並且我使用了this answer的css解決方案來解決您的問題。

我製作了一支筆來幫助您可視化上述所有內容。希望能幫助到你。 http://codepen.io/anon/pen/PqEmgP