引導切換打開菜單不跨越屏幕

我有一點與引導有問題的100％的寬度NAV我已經放在一個網站，我正在做的。引導切換打開菜單不跨越屏幕

當在較小的屏幕上摺疊時，下拉導航菜單不會覆蓋屏幕的全部百分比 - 看起來好像菜單兩側有1px的間隙，我似乎無法弄清楚如何解決這個問題。

**編輯**

由於我原來的職位不好的標記 - 我已經更新了這個（仍然有probelems，但是這代表了我的問題更好）在JSFIDDLE

<div class="navbar navbar-custom"> 
<div class="container"> 

    <div class="navbar-header"> 

     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation"> 
     <span class="fa fa-bars fa-2x"></span> Menu</button> 

     <span class="logo"> Logo</span> 
    </div> 

    <div class="collapse navbar-collapse" id="navigation"> 
     <ul class="nav navbar-nav navbar-right"> 
       <li><a href="#linkRemovedForNow">Book A Repair</a> </li> 
       <li><a href="#about">About</a> </li> 
       <li><a href="#howitworks">How it Works</a> </li> 
       <li><a href="#testimonals">Testimonals</a> </li> 
       <li><a href="#contact">Contact</a> </li> 
      </ul> 
    </div> 

</div>

來源

2016-02-26 icanclimbmountains

你能重新在https://jsfiddle.net/yuxwh8cm/的問題？ – ketan

我在您的示例鏈接上看到了相同的內容。我進一步注意到，它可能是所有媒體查詢中的錯誤，因爲它似乎在頁面結束之前邊界底部的屬性幾乎「向上彎曲」。添加一個額外的Navbar-fixed-top類可以使輕微的曲線變直，但我的目的是要有一個標準的Nav，然後粘貼在滾動上，所以我想避免使用navbar-fixed-top。邊框半徑：0px;雖然略有幫助，但仍有差距。 – icanclimbmountains

拐角處的曲線由bootstrap.min.css中的@media（min-width：768px）{。navbar {border-radius：4px}}引起。你可以重寫你的CSS，但我沒有看到1像素的差距較小的尺寸。 – Legin76

這是因爲.navbar-collapse上的Bootstrap邊距發生的，這是15px的負邊距。只需將其移出像素每側：

.navbar-custom .container >.navbar-collapse { 
    margin-right: -16px; 
    margin-left: -16px; 
}

Bootply

來源

2016-02-26 19:17:03 ZimSystem

謝謝！我已經更新了這個答案（這裏是相當新的，它現在還不會顯示）。 – icanclimbmountains

您更新了答案？你的意思是說問題嗎？ – ZimSystem

我投了這個答案，我應該說！ – icanclimbmountains

引導切換打開菜單不跨越屏幕

回答

相關問題