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

有什么建议吗？

- itsme

Answer 1

经过仔细检查，不是300,000行而只有大约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. Bootstrap 中默认的 .collapse 属性会在平板电脑（横屏）和手机上隐藏菜单的右侧，而显示切换按钮来控制其隐藏/显示。因此，这个属性覆盖了默认属性并持续地显示这些元素。

2. 为了使右侧菜单与左侧菜单处于同一行，我们需要让左侧菜单向左浮动。

3. 这个属性在 Bootstrap 中默认存在，但在平板电脑（竖屏）和手机分辨率下不存在。您可以跳过它，它可能不会影响您整个导航栏。

4. 这将保持右侧菜单在右侧，而内部元素（li）将遵循属性 2. 因此，我们将左侧设置为 向左浮动，右侧设置为 向右浮动，使它们处于同一行。

- AyB

---

@gwho 刚刚在答案中添加了一个解释。 - AyB

如果您的唯一要求是防止UL/LI列表变成垂直的，则只需要第二个CSS。 - JamesB

这里不需要使用!important语句，对我来说没有问题。尽可能避免使用它们（!important）。 - Tim-Erwin

可以通过为提到的规则添加一个混合类（例如.navbar-flat）来进一步改进这个，这样可以通过将混合类附加到nav容器来动态地更改行为。 - Vasily Liaskovsky

@ICanHasKittenz 在小于768像素时，下拉菜单仍然会改变行为，它们会在导航栏中显示（折叠行为），而不是像预期的那样出现在浮动的白色框中（非折叠行为）。当单击下拉菜单标题时，它会变宽，迫使其他元素移动。只需在导航栏元素中添加一个下拉菜单，您就可以自己看到它。 - Roubi

Answer 2

导航栏将在小设备上折叠。折叠点由变量中的@grid-float-breakpoint定义。默认情况下，这将在768px之前发生。对于屏幕宽度低于768像素的屏幕，导航栏将如下所示：

可以在variables.less中更改@grid-float-breakpoint并重新编译Bootstrap。这样做时，您还需要更改navbar.less中的@screen-xs-max。您需要将此值设置为新的@grid-float-breakpoint -1。另请参见：https://github.com/twbs/bootstrap/pull/10465。这是必要的，以便在@grid-float-breakpoint处将导航栏表单和下拉菜单更改为其移动版本。

最简单的方法是自定义Bootstrap

找到变量：

 @grid-float-breakpoint

此处设置为@screen-sm，您可以根据需要进行更改。希望对您有所帮助！

---

针对SAAS用户

在@import "bootstrap.scss";之前添加自定义变量，例如$grid-float-breakpoint: 0px;。

- Gagan Gami

---

这真的很有帮助，不幸的是我正在使用Bootstrap CDN，因此无法自定义Bootstrap主文件。您有没有关于如何在单独的CSS文件中完成此操作的提示？ - itsme

在Bootstrap自定义页面上，@grid-float-breakpoint-variable的+1对我非常有帮助，这解决了我的问题！ - Wietse

对于SASS用户：只需在@import“bootstrap.scss”;行之前添加类似$grid-float-breakpoint: 0px;的自定义变量即可。请注意，不要更改原有意思，并尽可能使翻译通俗易懂。 - Duvrai

Answer 3

这里有一种方法，保持默认折叠行为不变，同时允许一个新的导航部分始终保持可见。这是对 navbar 的增强；navbar-header-menu 是我创建的 CSS 类，不是 Bootstrap 的一部分。

将此代码放置在 navbar-brand 之后的 navbar-header 元素中：

<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 的行为。

- Jeremy Cook

Answer 4

另一种方法是直接从标记中删除 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>

- digout

Answer 5

如果您没有使用较新的版本，请更改以下行：

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

- Michael Ribbons

Answer 6

以下解决方案适用于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类添加到主容器。以下是使用jade编写的示例：

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

- Cristi Draghici