(Bootstrap 3) 如何让小屏幕上的导航栏与大屏幕上的导航栏看起来一样

Question

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

这是我的导航条代码

<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

<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

Answer 2

Changing the collapsed mobile navbar breakpoint

The navbar collapses into its vertical mobile view when the viewport is narrower than @grid-float-breakpoint, and expands into its horizontal non-mobile view when the viewport is at least @grid-float-breakpoint in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is 768px (the smallest "small" or "tablet" screen).

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