全寬引導3多級內聯導航

Question

我試圖使多級內聯導航100％的寬度，但每邊都有一個像素，下一個多級有兩個像素。我嘗試過左：CSS上的-1px，但它留下了右側的一些空間。什麼是最好的方式來做到這一點。

.navbar{ 
 
    border-radius: 0 !important; 
 
    } 
 

 
    .dropdown{ 
 
    list-style: none; 
 
    padding: 1rem 2rem; 
 
    } 
 

 
    .dropdown-menu{ 
 
    width: 100%; 
 
    border-radius: 0; 
 
    margin: 0; 
 
    background-clip: inherit; 
 
    } 
 

 
    .dropdown-menu > li{ 
 
    display: inline-block; 
 
    float: left; 
 
    } 
 

 
    .multi-level > a{ 
 
    padding: 3px 20px; 
 
    }

<nav class="navbar navbar-default"> 
 
     
 
    <li class="dropdown"> 
 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Factory models</a> 
 
     
 
     <ul class="dropdown-menu"> 
 
      <li class="dropdown-submenu"><a href="#">MKIII</a> 
 
       <ul class="dropdown-menu multi-level"> 
 
       <a href="#">MKIII</a> 
 
       <a href="#">MKIII Roadstar</a> 
 
       <a href="#">MKIII Roadster 20th Anniversary Model</a> 
 
       <a href="#">MKIII-R Edition</a> 
 
       <a href="#">MKIII Slabside</a> 
 
       </ul> 
 
      </li> 
 
      <li><a href="#">MKII</a></li> 
 
      <li><a href="#">GT 40</a></li> 
 
      <li><a href="#">Datona coupe</a></li> 
 
      <li><a href="#">Corvette</a></li> 
 
      <li><a href="#">Shelby</a></li> 
 
      <li><a href="#">Caterham</a></li> 
 
     </ul> 
 
    </li> 
 
    </nav>

Answer 1

從.navbar刪除邊框和應該這樣做。

.navbar {邊界：0;}

，或者至少去除左右邊界。他們每個1像素。