如何防止 Bootstrap 3 导航栏折叠？-css教程-PHP中文网

如何防止 Bootstrap 3 导航栏折叠？

Barbara Streisand

发布： 2024-11-24 03:43:17

原创

455 人浏览过

How Can I Prevent My Bootstrap 3 Navbar from Collapsing?

防止 Bootstrap 3 中的导航栏折叠

Bootstrap 的导航栏提供了一种便捷的方法来创建适应不同屏幕尺寸的可折叠菜单。但是，在某些情况下，您可能希望禁用折叠功能以保持菜单始终可见。

解决方案

为了防止导航栏折叠，您可以覆盖特定的 CSS属性：

.navbar-collapse.collapse {
  display: block!important;
}

.navbar-nav>li, .navbar-nav {
  float: left !important;
}

.navbar-nav.navbar-right:last-child {
  margin-right: -15px !important;
}

.navbar-right {
  float: right!important;
}

登录后复制

说明

第一个属性覆盖默认的 .collapse 行为，强制菜单保持可见。
第二个和第三个属性确保左侧和右侧菜单项都向左浮动，将它们对齐在同一位置
第四个属性纠正了较小屏幕上右侧菜单对齐的小问题。

示例代码

考虑导航栏的以下 HTML 代码：

<div class="navbar navbar-fixed-top myfont" role="navigation">
    <div class="">
        <ul class="nav navbar-nav navbar-left">
            <li>
                <a class="navbar-brand" href="#">
                    <img src="assets/img/logo.png" />
                </a>
            </li>
            <li>
                <button class="btn btn-navbar">
                    <i class="fa fa-edit"></i>
                    Create 
                </button>
            </li>
        </ul>
    </div>
    <ul class="nav navbar-nav navbar-right">
        <li data-match-route="/"><a href="#/page-one">Login</a></li>
        <li data-match-route="/"><a href="#/page-two/sub-a">Signup</a></li>
    </ul>
</div>

登录后复制

通过应用提到的 CSS 覆盖如上所述，无论屏幕尺寸如何，该导航栏都将不再折叠。

以上是如何防止 Bootstrap 3 导航栏折叠？的详细内容。更多信息请关注PHP中文网其他相关文章！