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

问题描述

这是我的简单导航栏:

<div class=""><ul class="nav navbar-nav navbar-left"><li><a class="navbar-brand" href="#"><img src="assets/img/logo.png"/></a><li><button class="btn btn-navbar"><i class="fa fa-edit"></i>创建
<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>

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

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

有什么建议吗?

解决方案

仔细检查后，不是 30 万行，而是大约有 3-4 个 CSS 属性需要覆盖:

.navbar-collapse.collapse {显示:阻止！重要；}.navbar-nav>li, .navbar-nav {浮动:左！重要；}.navbar-nav.navbar-right:last-child {边距右:-15px ！重要；}.navbar-右{浮动:对！重要；}

有了这个，你的菜单就不会折叠起来.

演示 (jsfiddle)

说明

四个 CSS 属性分别执行:

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

2. 为了让右侧菜单与左侧出现在同一行，我们需要左侧浮动.

3. 默认情况下，此属性存在于引导程序中，但不存在于平板电脑(纵向)到手机分辨率中.你可以跳过这个，它可能不会影响你的整体导航栏.

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

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