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

  

Changing the collapsed mobile navbar breakpoint

     

当视口比@grid-float-breakpoint窄时，导航栏会折叠到其垂直移动视图中，并且当视口的宽度至少为@grid-float-breakpoint时，会扩展为其水平非移动视图。在Less来源中调整此变量以控制导航栏何时折叠/展开。默认值为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