【问题标题】:Bootstrap nav row resizes smoothly, but active or highlighted links are only partially highlightedBootstrap 导航行调整大小平滑,但活动或突出显示的链接仅部分突出显示
【发布时间】:2014-08-26 01:22:11
【问题描述】:

在较小的屏幕上,此导航中的一个链接(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;
}

【问题讨论】:

  • 您能发布到目前为止您尝试过的代码吗?

标签: css twitter-bootstrap-3


【解决方案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>

【讨论】:

  • 嗯,文本中心不适合我。也许第一个问题需要先解决。
猜你喜欢
  • 1970-01-01
  • 2019-08-19
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2022-10-20
  • 2012-11-03
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多