引导程序：导航栏不响应：在sm-sizes处重叠/断点

导航栏在大型桌面上工作正常，但如果浏览器大小介于781px和1005px之间，则li标签链接不适合导航栏，导致重叠或分裂成两条“线”（例如“Kontakt”）。你可以在我的导航栏截图中看到它。引导程序：导航栏不响应：在sm-sizes处重叠/断点

截图：http://s14.directupload.net/images/140517/5ov7sr5v.png

我与引导模板和有关的Joomla 3.3以下。

这是一些代码。

HTML：

<!-- NAVBAR --> 
<nav class="navbar navbar-default" role="navigation"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
    <?php /* <a class="navbar-brand" href="<?php echo $this->baseurl; ?>"><?php echo $siteName; ?></a> */ ?> 
    </div> 
    <div class="navbar-collapse collapse"> 
     <jdoc:include type="modules" name="mainmenu" /> 
    </div><!--/.nav-collapse --> 
</nav><!--/ .navbar navbar-default -->

<jdoc:include type="modules" name="mainmenu" />抛出<ul class="nav navbar-nav menu"> 和用于第二级（下拉）：<ul class="dropdown-menu nav-child unstyled small">

JavaScript的：

 // bootstrap dropdown menu 
    $('.navbar .parent > a').addClass('dropdown-toggle'); 
    $('.navbar .dropdown-toggle').attr('data-toggle','dropdown'); 
    $('.navbar .dropdown-toggle').append(' <b class="caret"></b>');

Template.less：

.navbar { 
background-image:url(../images/menu_bg.png); 
background-repeat:repeat-x; 
margin-bottom: 0; 
font-size: @font-size-base; 
border-radius:0; 

ul { 
    li { 

     border-right:1px solid @navbar-default-border; 

     &:hover { 

     } 

     a { 

      &:first-child { 

      } 
      &:last-child { 
       border-right:none; 
      } 
     } 
    } 
} //.ul

} //.navbar

我没有更改变量的任何大小属性。 @ grid-float-breakpoint：@screen-sm-min; @ grid-float-breakpoint-max：（@ grid-float-breakpoint-1）;

我该如何解决这个问题？网站的响应速度很重要。

另一个问题是切换按钮。它看起来很有用，如果我点击它但我不能再次点击它让菜单消失。

来源

2014-05-17 user3646958

从图片我可以告诉你，只是有太多的导航项，以适应你的网页的宽度。尝试使用@media查询到目标上.nav > li > a填充，所以当你缩小页面就会降低padding

的min和max宽度只是默认大小。我添加了一个min，因为下面768px Bootstraps崩溃菜单应该踢入。

@media only screen and (max-device-width : 1224px) 
        and (min-device-width : 768px) { 

    .nav { 
     > li { 
      > a { 
       /* Default - padding: 10px 15px;*/ 
       padding: 10px 12px; 
      } 
     } 
    } 

}

来源

2015-01-21 15:14:23 Arty

引导程序：导航栏不响应：在sm-sizes处重叠/断点

回答

相关问题