(引导程序 3)如何让小屏幕上的导航栏与大屏幕上的导航栏相同

Question

我正在创建一个固定在屏幕顶部的引导导航栏，但在小屏幕上，我不希望出现下拉文本的汉堡包按钮。相反，我只希望文本像在大屏幕上一样显示在导航栏上。

这是我的导航栏代码

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Logo</a>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="home.html">Home <span class="sr-only">(current)</span></a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="#">Login</a></li>
            </ul>
        </div>
    </div>
</nav>

如何在小屏幕上使导航栏上的文本与大屏幕上导航栏上的文本相同？

Answer 1

更改折叠的移动导航栏断点

当视区宽度小于@grid-float-breakpoint时，导航栏将折叠为其垂直移动视图，当视区宽度至少为 @grid-float-breakpoint 时，导航栏将展开为其水平非移动视图。在"较少源"中调整此变量，以控制导航栏何时折叠/展开。默认值为 768px（最小的"小"或"平板电脑"屏幕）。

下面是该特定变量所在的位置：https://github.com/twbs/bootstrap/blob/57260f16b364e4cb559cd65159197fd1cf5248f7/less/variables.less#L321

Answer 2

<div class="navbar-header">
    <button data-target="#bs-example-navbar-collapse-9" data-toggle="collapse" class="navbar-toggle collapsed" type="button">       
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a href="#" class="navbar-brand">Brand</a>
</div>
<div id="bs-example-navbar-collapse-9" class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
        ...
    </ul>
</div>

http://getbootstrap.com/components/#navbar-inverted