如何制作响应式导航栏？

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