（引导 3）如何让小屏幕上的导航栏与大屏幕上的导航栏一样

Posted 2023-04-13

【中文标题】（引导 3）如何让小屏幕上的导航栏与大屏幕上的导航栏一样

【英文标题】：(Bootstrap 3) How to have navbar on small screens appear the same as navbar on big screens

【发布时间】：2015-02-28 10:25:50

【问题描述】：

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

这是我的导航栏代码

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

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

【问题讨论】：

我不确定，但我认为 navbar-collapse 类负责汉堡包的行为。

我试过把它拿出来，但没有用。不过感谢您的帮助！

【参考方案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

【参考方案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