Bootstrap 3 - 禁用导航栏折叠
Posted
技术标签:
【中文标题】Bootstrap 3 - 禁用导航栏折叠【英文标题】：Bootstrap 3 - disable navbar collapse 【发布时间】：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 来覆盖默认样式。
有什么建议吗？
【问题讨论】：
【参考方案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
【讨论】：
以上是关于Bootstrap 3 - 禁用导航栏折叠的主要内容，如果未能解决你的问题，请参考以下文章
在 Bootstrap 3 中单击导航栏元素外部时如何关闭打开的折叠导航栏？
Bootstrap 3 Navbar 左侧和右侧导航栏项目的左侧折叠菜单