全宽Bootstrap 3多级内联导航

Question

我试图使多级内联导航100%的宽度，但有一个像素的两边和两个像素在下一个多级。我试过左边：-1px的CSS，但它在右边留下了一些空间。做这件事最好的方法是什么？

​

 .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像素。