Bootstrap 3 – 禁用导航栏折叠

这是我简单的导航栏： 

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

任何build议？

仔细检查后，不是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属性隐藏了平板电脑（横向）和电话菜单的右侧，而是显示切换button以隐藏/显示它。 因此这个属性重写了默认值并持久地显示这些元素。

  2. 为了让右边的菜单和左边一起出现在同一条线上，我们需要左边的是左边的。

  3. 该属性在引导程序中默认存在，但在平板电脑（人像）到手机分辨率上不存在。 你可以跳过这一个，这可能不会影响你的整体导航栏。

  4. 这使得右边的菜单保持在右边，而内部元素（ li ）将会跟随属性2.所以我们有左边的浮动左边和右边的浮动把它们合并成一条线。

nabvar将在小型设备上崩溃。 折叠点由variables中的@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的导航栏窗体和下拉菜单更改为移动版本。

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

findvariables： 

  @grid-float-breakpoint

它被设置为@screen-sm ，你可以根据你的需要改变它。 希望它有帮助！

对于SAAS用户

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

这是一种使默认折叠行为保持不变的方法，同时允许导航的新部分始终保持可见。 它是一个navbar的增强; navbar-header-menu是我创build的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可用于对元素进行可视化sorting，但不能保证将元素拖到屏幕最右侧的部分。 小提琴演示与navbar-form行为。

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

以下解决scheme在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
Interesting Posts