引導程序：導航欄不響應：在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處重疊/斷點

回答

相關問題