引導程序：如何防止導航截斷？

我正在Bootstrap 3網站上工作，除了主菜單以外，其他所有東西都可以使用。它在整體頁面大小調整之前調整大小和截斷，並且在調整到移動導航之前快速將最後兩個導航項拖到下一行，中斷滑塊，從而具有頭髮觸發器。引導程序：如何防止導航截斷？

該頁面可以找到here。的HTML如下：

<!-- Navigation --> 
    <div class="navbar navbar-default" role="navigation"> 
     <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" 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> 
       </div><!-- navbar-header --> 
     <div class="collapse navbar-collapse"> 
      <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#attorneys">Our Attorneys</a></li> 
      <li><a href="#business-litigation">Business Ligitagion</a></li> 
      <li><a href="#business-litigation">Personal Injury</a></li> 
      <li><a href="#business-litigation">Verdicts &amp; Settlements</a></li> 
      <li><a href="#business-litigation">Client Testimonials</a></li> 
      <li><a href="#business-litigation">Map &amp; Directions</a></li> 
      </ul> 
     </div><!--/.nav-collapse --> 
     </div><!-- container --> 
    </div><!-- navbar -->

的CSS：

/* @group navigation */ 

.navbar { 
    position: relative; 
    min-height: 35px; 
    margin-bottom: 0; 
} 

.navbar-default { 
    background-color: #9d2024; 
    border: none; 
    height: 25px; 

} 

@media (max-width: 767px) { 
    .navbar-default { 
    min-height:50px;  
} 
} 
.navbar-default .navbar-brand { 
    color: #fff; 
} 
.navbar-default .navbar-brand:hover, 
.navbar-default .navbar-brand:focus { 
    color: #fff; 
    border-bottom: 6px solid #fff; 
} 

.navbar-default .navbar-text { 
    color: #fff; 
} 

.navbar-default .navbar-nav > li > a { 
    color: #fff; 
    padding: 3px 10px; 
    margin: 5px 0 0 0; 
    border-right: 1px solid #fff; 
    font-family: trebuchet ms; 
    text-transform: uppercase; 
} 

.navbar-default .navbar-nav > li:last-child > a { 
    border: none; 
} 
.navbar-default .navbar-nav > li > a:hover, 
.navbar-default .navbar-nav > li > a:focus { 
    color: #fff; 
    border-bottom: 4px solid #fff; 
} 
.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus { 
    color: #fff; 
    border-bottom: 4px solid #fff; 
    background-color: #9d2024; 
}

如果刪除了導航漂浮到最左邊，不與頁面流的容器。我可以使用一些見解來讓導航正確調整大小而不會截斷。

來源

2014-09-30 fmz

你要麼擺脫一些菜單元素，要麼使用'font-size：9px！important;'（是的，如果你想在保持響應行爲的同時只有一條線，那麼這就是你需要的確切大小），沒有其他的它不會截斷的方式 – Devin 2014-09-30 19:50:48

那麼你是否嘗試更早地切換到移動下拉導航？或者你是否試圖讓這兩個導航項與頁面一起流動？顯然，除非字體大小和間距減小，否則它們不會適合一行。 – mtaube 2014-09-30 20:03:36

我想保留它直到移動導航。有一個問題，我在導航的右側看到一個很大的空間，就像填充一樣，但那裏沒有任何東西。 – fmz 2014-09-30 20:08:11

您需要使用正確的引導程序結構。

問題是在這裏：

row banner和row slider-bg的div類。只需刪除row名稱和所有需要的工作。

開始構建引導程序的錯誤原因是放一行container類的父代。容器是第一個包裝自舉類，然後來row，然後cols

對於菜單使用較小的字體大小或內部填充li, a。

來源

2014-09-30 19:54:00 Foxsk8

感謝您的反饋。我從兩個div中刪除了「row」，並刪除了水平滾動條，但導航仍然截斷。我錯過了別的嗎？ – fmz 2014-09-30 20:06:19

沒有足夠的空間顯示最後一個菜單項。您可以縮小字體大小或減小內部填充。 '.navbar-default .navbar-nav> li> a {padding：3px 7px;}' – Foxsk8 2014-09-30 20:13:35

刪除'行'和縮小字體大小的組合完成了。謝謝！ – fmz 2014-09-30 20:16:28

引導程序：如何防止導航截斷？

回答

相關問題