Bootstrap 3-禁用导航栏折叠


88

这是我简单的导航栏:

<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来覆盖默认样式。

有什么建议吗?

Answers:


138

经过仔细检查,没有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;
}

这样,您的菜单就不会折叠。

演示 jsfiddle

说明

四个CSS属性分别执行以下操作:

  1. .collapse引导程序中的默认属性隐藏平板电脑(风景)和电话的菜单的右侧,而是显示一个切换按钮来隐藏/显示它。因此,此属性将覆盖默认值并持久显示这些元素。

  2. 为了使右侧菜单与左侧出现在同一行上,我们需要左侧向左浮动。

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

  4. 这将使右侧菜单保持在右侧,而内部元素(li)将跟随属性2。因此,我们将左侧浮点数和右侧浮点数右移,使它们变成一行。


2
@gwho刚刚在答案中添加了解释。
2014年

1
如果足够瘦,则向左浮动的元素和向右浮动的元素可以彼此缠绕(即谈论uls而不是lis)。防止这种情况发生的最好方法是什么?
ahnbizcad 2014年

2
如果您唯一的要求是防止UL / LI列表变垂直,则仅需要第二CSS。
JamesB 2014年

1
!important此处的声明不是必需的,对我而言,无需声明。尽量避免它们(!重要)。
蒂姆·欧文

2
@ICanHasKittenz下拉菜单仍会更改行为,当<768 px时,它们会显示在导航栏(折叠的行为)中,就像预期的那样出现在浮动的白框(未折叠的行为)中。单击时,下拉标题会变宽,迫使其他元素移动。只需在navbar元素中添加一个下拉菜单,您便会自己看到它。
鲁比

24

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

在此处输入图片说明

可以更改@grid-float-breakpointin variables.less并重新编译Bootstrap。这样做时,您还必须更改@screen-xs-maxnavbar.less。您将必须将此值设置为new @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";


4
不幸的是,这确实有帮助。我正在使用引导CDN,因此无法自定义引导主文件,有关如何在单独的CSS文件中执行此操作的任何提示?
itsme 2014年

2
引导程序自定义页面上的@ grid-float-breakpoint-variable +1,这对我有用!
Wietse

4
对于SASS用户:只需在行$grid-float-breakpoint: 0px;之前添加自定义变量@import "bootstrap.scss";
即可-Duvrai

5

这是一种使默认折叠行为保持不变的方法,同时允许新的导航部分始终保持可见状态。它的扩充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


0

如果您使用的不是less版本,则需要更改以下行:

@media (max-width: 767px) { /* Change this to 0 */
  .navbar-nav .open .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: transparent;
    border: 0;
    box-shadow: none;
  }
  .navbar-nav .open .dropdown-menu > li > a,
  .navbar-nav .open .dropdown-menu .dropdown-header {
    padding: 5px 15px 5px 25px;
  }
  .navbar-nav .open .dropdown-menu > li > a {
    line-height: 20px;
  }
  .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-nav .open .dropdown-menu > li > a:focus {
    background-image: none;
  }
}

0

以下解决方案在Bootstrap 3.3.4中为我工作:

CSS:

/*no collapse*/

.navbar-collapse.collapse.off {
    display: block!important;
}
.navbar-collapse.collapse.off ul {
    margin: 0;
    padding: 0;
}

.navbar-nav.no-collapse>li,
.navbar-nav.no-collapse {
    float: left !important;
}

.navbar-right.no-collapse {
    float: right!important;
}

然后将.no-collapse类添加到每个列表中,并将.off类添加到主容器中。这是一个用玉写的例子:

nav.navbar.navbar-default.navbar-fixed-top
        .container-fluid
            .collapse.navbar-collapse.off
                ul.nav.navbar-nav.no-collapse
                    li
                        a(href='#' class='glyph')
                            i(class='glyphicon glyphicon-info-sign')
                ul.nav.navbar-nav.navbar-right.no-collapse
                    li.dropdown
                        a.dropdown-toggle(href='#', data-toggle='dropdown' role='button' aria-expanded='false')
                            | Tools
                            span.caret
                        ul.dropdown-menu(role='menu')
                            li
                                a(href='#') Tool #1
                    li
                        a(href='#')
                            | Logout

0

另一种方法是简单地collapse navbar-collapse从标记中删除。Bootstrap 3.3.7的示例

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<nav class="navbar navbar-atp">
  <div class="container-fluid">
    <div class="">
      <ul class="nav navbar-nav nav-custom">
        <li>
          <a href="#" id="sidebar-btn"><span class="fa fa-bars">Toggle btn</span></a>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li>Nav item</li>
      </ul>
    </div>
  </div>
</nav>

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.