html - (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

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