css – Bootstrap 3 – 禁用导航栏折叠

这是我简单的navbar：

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

我只是想防止这种崩溃，因为我不需要它，怎么办？

我想避免编写300K行的CSS重写默认样式。

任何建议？

解决方法

在仔细检查后，不是300k行，但有大约3-4 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;
}

有了这个，你的菜单不会崩溃。

DEMO(jsfiddle)

说明

四个CSS属性分别：

>引导程序中的默认.collapse属性隐藏了平板电脑(横向)和手机菜单的右侧，而是显示了一个切换按钮以隐藏/显示它。因此，此属性覆盖默认值，并持久显示这些元素。>对于右侧菜单与左侧显示在同一行上，我们需要左侧浮动左侧。>默认情况下，此属性在引导时存在，但不在平板电脑(纵向)到手机分辨率。你可以跳过这一个，它可能不会影响你的整体导航栏。>这将右侧菜单保持在右侧，而内部元素(li)将遵循属性2.所以我们有左侧浮动左侧和右侧浮动右侧，将它们放到一行中。

原文地址：https://www.jb51.cc/css/223509.html