css - Bootstrap 导航行调整大小平滑，但事件或突出显示的链接仅部分突出显示

Question

在较小的屏幕上，此导航中的一个链接(nav-pills，nav-justified)占用两行，这也使得导航中其他链接的“框”尺寸更大。这很好，除了事件或突出显示的链接仅突出显示框的一部分，如下图所示。看起来不太好，是吗？

image of nav row

如何使事件或突出显示的部分填满整个框？另外，我怎样才能使链接在框中垂直居中？

这是相关的 html:

<nav> 
    <ul class="nav nav-pills nav-justified">
        <li><a href="#">Atmosphere</a></li>
        <li class="active"><a href="#">Food</a></li>
        <li><a href="#">Drink</a></li>
        <li><a href="#">Access &amp; Info</a></li>
        <li><a href="#">Coupons</a></li>
        <li><a href="#">Reservation</a></li>
    </ul>
</nav>

和CSS:

header, section, footer, aside, nav, main, article, figure {display: block;}

nav > ul > li {
    border: 4px #abcabc;
    border-style: double;
}

nav > ul > li > a {
    color: #c30200;
    font-family: Garamond, sans-serif;
    font-size: 18px;
}

Answer 1

试试这个:

通常突出显示的部分会填满整个框。如果它不是意味着发布你的代码，

对于垂直居中，您需要应用 text-center

DEMO

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Brand</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse text-center" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
</nav>