Question

任何人都可以帮助我，请问如何以网格宽度显示无序列表？

<div class="navbar" role="navigation">
    <div class="container">
    <div class="row">
        <div class="navbar-header col-md-4">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#topmenu">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a rel="home" class="logo" href="{$baseUri}">
            <img src="img/layout/portfolio-2014-logo.png" alt="" class="img-responsive logo" />
        </a>
        </div>
        <div class="navbar-collapse collapse" id="topmenu">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#section-gallery">blog</a></li>
            <li class="col-md-2"><a href="#section-news">works</a></li>
            <li class="col-md-2"><a href="#section-bio">about</a></li>
            <li class="col-md-2"><a href="#section-contact">contact</a></li>
        </ul>
        </div>  
    </div>
    </div>
    <div class="container">
    <hr>
    </div>
</div>

我尝试过类似的东西，但它不起作用：/

Answer 1

那不是导航栏中默认Bootstrap的一部分，因为navbar-nav根据文本和填充的宽度来确定它自己的宽度，但你可以删除navbar-nav和只需使用nav：

DEMO：http://jsbin.com/kiyiye/1/

    <ul class="nav">

它可以与col - * - 类一起使用，但是您可能需要解决较小的视口边距等问题。如果你决定使用他们的文档中没有展示过的东西，那就非常熟悉Bootstrap的CSS。

用于无序列表的Bootstrap navbar网格系统

1 个答案: