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 {border：0;}

或者至少删除左右边框。它们每个都是1像素。

全宽度Bootstrap 3多级内联导航

1 个答案: