引导导航行可以平滑地调整大小，但活动链接或高亮显示的链接只是部分高亮显示

Question

在较小的屏幕上，这个导航中的一个链接(nav-药丸，nav-justified)占用了两行，这使得导航中其他链接的"框"尺寸也变大了。这很好，除了活动的或高亮的链接只高亮了部分框，如下图所示。看起来不太好，是吧?

font =宋体

如何使活动或突出显示的部分填充整个框?此外，我如何垂直居中的框内链接?

这是相关的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

<标题> 演示

<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>