Bootstrap 3 - 禁用导航栏折叠答案

【问题标题】：Bootstrap 3 - disable navbar collapseBootstrap 3 - 禁用导航栏折叠
【发布时间】：2014-06-25 11:06:22
【问题描述】：

这是我的简单导航栏：

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

有什么建议吗？

【问题讨论】：

标签： css twitter-bootstrap-3 navbar collapse preventdefault

【解决方案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;
}

这样你的菜单就不会崩溃了。

DEMO (jsfiddle)

解释

四个 CSS 属性分别做：

引导程序中默认的.collapse 属性隐藏了平板电脑（横向）和手机菜单的右侧，而是显示了一个切换按钮来隐藏/显示它。因此，此属性会覆盖默认值并持续显示这些元素。
为了使右侧菜单与左侧出现在同一行，我们需要左侧浮动。
默认情况下，此属性在引导程序中存在，但在平板电脑（纵向）到手机分辨率上不存在。你可以跳过这个，它可能不会影响你的整体导航栏。
这使右侧菜单保持在右侧，而内部元素 (li) 将跟随属性 2。所以我们有左侧 向左浮动 和右侧向右浮动 将它们排成一行。

【讨论】：

@gwho 刚刚为答案添加了解释。
如果它变得足够瘦，左浮动和右浮动元素可以相互包裹（我说的是uls而不是lis）。什么是最好的方法来防止这种情况发生？
如果您的唯一要求是防止 UL/LI 列表变为垂直，则只需要第二个 CSS。
!important 语句在这里不是必需的，对我来说它没有。尽可能避免使用它们（！重要）。
@ICanHasKittenz 下拉菜单在

【解决方案2】：

nabvar 在小型设备上会崩溃。折叠点由变量中的@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 处的导航栏表单和下拉菜单更改为其移动版本所必需的。

Easiest way is to customize bootstrap

查找变量：

 @grid-float-breakpoint

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

对于 SAAS 用户

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

【讨论】：

这真的很有帮助，不幸的是我正在使用引导 CDN，所以我无法自定义引导主文件，关于如何在单独的 css 文件中执行此操作的任何提示？
+1 用于引导自定义页面上的@grid-float-breakpoint-variable，这对我有用！
对于 SASS 用户：只需在 @import "bootstrap.scss"; 行之前添加您的自定义变量，如 $grid-float-breakpoint: 0px;

【解决方案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 演示了这种行为。

【讨论】：

【解决方案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>

【讨论】：

【解决方案5】：

如果你没有使用 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;
  }
}

【讨论】：

【解决方案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

【讨论】：