引导导航栏不是平板电脑

Question

正确显示我有一个小问题，我有引导导航栏设置，但是当我把它调整到平板宽度，菜单逃脱导航栏和进入内容，如所示：

http://oi57.tinypic.com/2uykv9g.jpg “看到问题”

菜单是否太宽？任何帮助如何解决这个问题都会受到极大的关注。

代码在这里：

<div class="navbar navbar-fixed-top"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
        <span class="fa fa-bars color-white"></span> 
       </button> 

        <a class="navbar-brand" href="index.html" ><img class="img-responsive" src="images/new.jpg"></a> 
      </div> 
      <div class="navbar-collapse collapse"> 



      <ul class="nav navbar-nav" > 
        <li class="active"><a href="#section-main"><i class="fa fa-home"></i></a></li> 
        <li><a href="#section-pakiety">Packages</a></li> 
        <li><a href="#section-works">Examples of webpages</a></li> 
        <li><a href="#section-about">Our Services</a></li>      
        <li><a href="#section-korzysci">Benefits</a></li> 
        <li><a href="#section-ref">References</a></li> 
        <li><a href="#section-contact">Contact </a></li> 
       </ul> 



      </div><!--/.navbar-collapse --> 
     </div> 
    </div> 

Answer 1

好吧，我固定的，所以如果别人是有这个问题，我所做的就是标志（这是部分问题）缩减至80％，在更小的设备比992px，给了它一个绝对的定位等，这里是CSS：

@navbar-height: 150px; 
@navbar-brand-vpadding: 10px; 

.navbar-brand img { 
    height: @navbar-height - @navbar-brand-vpadding * 2; 
    position: absolute; 
    top: @navbar-brand-vpadding; 
} 
@media (max-width: 992px) { 
    .make-custom-class-here { 
    width:201px; 
    height:41px; 
    } 
}