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

Question

这是我的简单导航栏:

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

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

我想避免编写 30 万行 CSS 来覆盖默认样式。

有什么建议吗？

Answer 1

仔细检查后，不是 30 万行，而是大约 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 属性分别执行以下操作:

1. bootstrap 中的默认 .collapse 属性隐藏了平板电脑(横向)和手机菜单的右侧，而是显示一个切换按钮来隐藏/显示它。因此，此属性会覆盖默认值并持续显示这些元素。

2. 要使右侧菜单与左侧菜单显示在同一行，我们需要左侧向左浮动。

3. 此属性在 Bootstrap 中默认存在，但在平板电脑(纵向)到手机分辨率上不存在。您可以跳过这个，它可能不会影响您的整体导航栏。

4. 这使右侧菜单保持在右侧，而内部元素 (li) 将遵循属性 2。所以我们有左侧 向左浮动 和右侧向右浮动，使它们排成一行。