Bootstrap 3 - 禁用导航栏折叠 [英] Bootstrap 3 - disable navbar collapse

问题描述

这是我简单的导航栏：

 < div class =navbar navbar-fixed-top myfontrole = navigation> 
< div class => 
< ul class =nav navbar-nav navbar-left> 
< li> 
< a class =navbar-brandhref =＃> 
< 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>登录< / a>< / li> 
< li data-match-route =/>< a href =＃/ page-two / sub-a>注册< / 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 属性隐藏了平板电脑（横向）和手机菜单的右侧，而是一个切换按钮以隐藏/显示它。因此，此属性覆盖默认值并持续显示这些元素。

右侧菜单与左侧同一行显示

默认情况下，此属性在引导时存在，但在平板电脑（人像）上不显示为手机分辨率。

这会将右侧菜单保持在右侧，而内部元素（<$因此，我们有左侧 float left 和右侧 float right

This is my simple 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>

I just would like to prevent this to collapse, cause I don't need it, how to do?

I would like to avoid writing 300K lines of CSS for overriding the default styles.

Any suggestion?

解决方案

After close examining, not 300k lines but there are around 3-4 CSS properties that you need to override:

.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;
}

And with this your menu won't collapse.

DEMO (jsfiddle)

EXPLANATION

The four CSS properties do the respective:

1. The default .collapse property in bootstrap hides the right-side of the menu for tablets(landscape) and phones and instead a toggle button is displayed to hide/show it. Thus this property overrides the default and persistently shows those elements.

2. For the right-side menu to appear on the same line along with the left-side, we need the left-side to be floating left.

3. This property is present by default in bootstrap but not on tablet(portrait) to phone resolution. You can skip this one, it's likely to not affect your overall navbar.

4. This keeps the right-side menu to the right while the inner elements (li) will follow the property 2. So we have left-side float left and right-side float right which brings them into one line.

这篇关于Bootstrap 3 - 禁用导航栏折叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！