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>

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

我想避免编写300K行的CSS来覆盖默认样式.

有什么建议吗？

Answer 1

仔细检查后,不是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;
}

这样你的菜单就不会崩溃.

演示( jsfiddle)

说明

四个CSS属性分别执行:

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

2. 要使右侧菜单与左侧一起出现在同一条线上,我们需要左侧向左浮动.

3. 此属性默认存在于引导程序中,但不存在于平板电脑(纵向)到电话分辨率上.您可以跳过这一个,它可能不会影响您的整体导航栏.

4. 这使得右侧菜单保持在右边,而内部元素(li)将跟随属性2.因此我们左侧和右侧浮动左侧浮动,这使它们成为一条线.

Answer 2

nabvar将在小型设备上崩溃.折叠点由@grid-float-breakpoint变量定义.默认情况下,这将在之前768px.对于768像素屏幕宽度以下的屏幕,导航栏将如下所示:

可以更改@grid-float-breakpointin variables.less并重新编译Bootstrap.执行此操作时,您还必须更改@screen-xs-maxnavbar.less.您必须将此值设置为新值@grid-float-breakpoint -1.另见:https://github.com/twbs/bootstrap/pull/10465.这需要将@ grid-float-breakpoint的导航栏形式和下拉列表更改为其移动版本.

最简单的方法是自定义引导程序

找到变量:

 @grid-float-breakpoint

如果设置为@screen-sm,您可以根据需要进行更改.希望能帮助到你!

对于SAAS用户

像$grid-float-breakpoint: 0px;之前一样添加自定义变量@import "bootstrap.scss";

Answer 3

这是一种保持默认折叠行为不变的方法,同时允许新的导航部分始终保持可见.它的增加navbar; navbar-header-menu是我创建的CSS类,不属于Bootstrap的一部分.

将其放在navbar-header元素之后navbar-brand:

<div class="navbar-header-menu">
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">I'm always visible</a></li>
    </ul>
    <form class="navbar-form" role="search">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
    </form>
</div>

添加此CSS:

.navbar-header-menu {
    float: left;
}

    .navbar-header-menu > .navbar-nav {
        float: left;
        margin: 0;
    }

        .navbar-header-menu > .navbar-nav > li {
            float: left;
        }

            .navbar-header-menu > .navbar-nav > li > a {
                padding-top: 15px;
                padding-bottom: 15px;
            }

        .navbar-header-menu > .navbar-nav .open .dropdown-menu {
            position: absolute;
            float: left;
            width: auto;
            margin-top: 0;
            background-color: #fff;
            border: 1px solid #ccc;
            border: 1px solid rgba(0,0,0,.15);
            -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
            box-shadow: 0 6px 12px rgba(0,0,0,.175);
        }

    .navbar-header-menu > .navbar-form {
        float: left;
        width: auto;
        padding-top: 0;
        padding-bottom: 0;
        margin-right: 0;
        margin-left: 0;
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

        .navbar-header-menu > .navbar-form > .form-group {
            display: inline-block;
            margin-bottom: 0;
            vertical-align: middle;
        }

    .navbar-header-menu > .navbar-left {
        float: left;
    }

    .navbar-header-menu > .navbar-right {
        float: right !important;
    }

    .navbar-header-menu > *.navbar-right:last-child {
        margin-right: -15px !important;
    }

检查小提琴:http://jsfiddle.net/L2txunqo/

警告:navbar-right可用于在视觉上对元素进行排序,但不保证将元素拉到屏幕的最右侧部分.小提琴演示了与...的行为navbar-form.