如何使用 Twitter 引导响应更改导航栏折叠阈值?
Posted
技术标签:
【中文标题】如何使用 Twitter 引导响应更改导航栏折叠阈值?【英文标题】:How to change navbar collapse threshold using Twitter bootstrap-responsive? 【发布时间】:2012-03-13 10:03:39 【问题描述】:我在 Rails 3.1.2 项目中使用 Twitter Bootstrap 2.0.1,使用 bootstrap-sass 实现。我正在加载bootstrap.css
和bootstrap-responsive.css
文件,以及bootstrap-collapse.js
javascript。
我有一个流畅的布局,其导航栏类似于example。这遵循导航栏“响应变化”指令here。它工作正常:如果页面窄于大约 940 像素,导航栏会折叠并显示一个“按钮”,我可以单击该按钮展开。
不过,我的导航栏在 550 像素宽时看起来不错,也就是说,除非屏幕很窄,否则它不需要折叠。
如何告诉 Bootstrap 仅在屏幕宽度小于 550 像素时折叠导航栏?
请注意,此时我确实不想要修改其他响应行为,例如堆叠元素而不是并排显示它们。
【问题讨论】:
好问题!根据您在问题中提供的信息,我能够从零开始实现可折叠的导航栏。谢谢! 【参考方案1】:你正在寻找bootstrap-responsive.css
的第239行
@media (max-width: 979px) ...
max-width
值触发响应式导航的位置。将其更改为 550px 左右,它应该可以很好地调整大小。
【讨论】:
谢谢。bootstrap-responsive.css
被埋在 bootstrap-sass gem 中。是的,我可以编辑它,但是当 gem 更新时,我必须再做一次。有没有办法覆盖@media 查询,类似于覆盖其他 CSS 元素?
在不重新声明所有 CSS 声明的情况下,我想不出任何方法来实现覆盖。
好的,谢谢。我尝试了这种方法,覆盖了 gem 代码中的那一行,它有点工作,但我在 767px 宽度以下的导航栏中得到了额外的水平填充,大概是因为 @media (max-width: 767px)
块中的 CSS。看起来我将不得不按照 Andres Ilich 的回答中的建议进行更广泛的覆盖。
正如我在对@Andres Ilich 的回答的评论中提到的,在可维护性方面,直接更新源代码似乎是两害相权取其轻,所以我现在会接受这个解决方案。我可以接受 767px 作为最小阈值,尽管我可以通过为不受@media (max-width: 767px)
影响的导航栏创建自定义容器来进一步降低该阈值。希望 Bootstrap(或 bootstrap-sass)有一天会包含一种使用变量来设置阈值的方法,但我认为这需要interpolation in media selectors。
Bootstrap 3 的导航栏断点覆盖 CSS 已更改 -- 这是 3.1 的工作示例:bootply.com/120604【参考方案2】:
您可以建立一个新的@media
查询以根据需要将导航栏元素向下放置,您所要做的就是重置前者以适应具有所需放置宽度的新查询。以此为例:
CSS
/** Modified Responsive CSS **/
@media (max-width: 979px)
.btn-navbar
display: none;
.navbar .nav-collapse
clear: none;
.nav-collapse
height: auto;
overflow: auto;
.navbar .nav
float: left;
margin: 0 10px 0 0;
.navbar .brand
margin-left: -20px;
padding: 8px 20px 12px;
.navbar .dropdown-menu:before, .navbar .dropdown-menu:after
display: block;
.navbar .nav > li > a, .navbar .dropdown-menu a
border-radius: 0;
color: #999999;
font-weight: normal;
padding: 10px 10px 11px;
.navbar .nav > li
float: left;
.navbar .dropdown-menu
background-clip: padding-box;
background-color: #FFFFFF;
border-color: rgba(0, 0, 0, 0.2);
border-radius: 0 0 5px 5px;
border-style: solid;
border-width: 1px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
display: none;
float: left;
left: 0;
list-style: none outside none;
margin: 0;
min-width: 160px;
padding: 4px 0;
position: absolute;
top: 100%;
z-index: 1000;
.navbar-form, .navbar-search
border:none;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
float: left;
margin-bottom: 0;
margin-top:6px;
padding: 9px 15px;
.navbar .nav.pull-right
float: right;
margin-left: auto;
@media (max-width: 550px)
.btn-navbar
display: block;
.navbar .nav-collapse
clear: left;
.nav-collapse
height: 0;
overflow: hidden;
.navbar .nav
float: none;
margin: 0 0 9px;
.navbar .brand
margin: 0 0 0 -5px;
padding-left: 10px;
padding-right: 10px;
.navbar .dropdown-menu:before, .navbar .dropdown-menu:after
display: none;
.navbar .nav > li > a, .navbar .dropdown-menu a
border-radius: 3px 3px 3px 3px;
color: #999999;
font-weight: bold;
padding: 6px 15px;
.navbar .nav > li
float: none;
.navbar .dropdown-menu
background-color: transparent;
border: medium none;
border-radius: 0 0 0 0;
box-shadow: none;
display: block;
float: none;
left: auto;
margin: 0 15px;
max-width: none;
padding: 0;
position: static;
top: auto;
.navbar-form, .navbar-search
border-bottom: 1px solid #222222;
border-top: 1px solid #222222;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
float: none;
margin: 9px 0;
padding: 9px 15px;
.navbar .nav.pull-right
float: none;
margin-left: 0;
在下面的代码中,您可以看到我如何包含处理 979px
标记之前的放置的原始 @media
查询和支持您想要的 550px
放置点的新查询。我直接从引导响应 css 修改了原始查询,以重置应用于导航栏元素的特定查询的所有样式,并将它们移植到带有您需要的放置点的新查询中。这样我们就可以将所有样式从原始查询转换为新查询,而不会在引导响应样式表中乱七八糟,这样默认值仍将应用于文档中的其他元素。
这是一个简短的演示,其中包含一个媒体查询,可根据需要设置为550px
:
http://jsfiddle.net/wU8MW/
注意:我将上述修改后的 @media
查询放在 css 框架下方,因为新修改的 css 应该比响应 css 首先加载。
【讨论】:
感谢您的详细解答。它似乎确实有效 - 我仍在试图弄清楚如何。如果我理解正确,您 (1) 克隆了原始的@media (max-width: 979px)
查询以创建新的 @media (max-width: 550px)
查询。然后 (2) 你手动编写了一个新的 979px 查询来覆盖主 bootstrap-responsive.css
中 979px 查询的效果?您的 CSS 中的标签序列似乎不遵循 bootstrap-responsive.css
中的序列,因此我很难比较它们以了解您所做的事情。
@MarkBerry 你在正确的轨道上。我写的@media (max-width: 550px)
查询不遵循最初的@media (max-width: 979px)
查询语法,因为我所做的只是一个快速示例,通过萤火虫和复制/粘贴手动覆盖它,对此很懒惰,但正确的做法是正如你在第二点中提到的那样。
在可维护性方面这是一个艰难的决定。恐怕这种广泛的覆盖在提供绝对控制的同时,将意味着在每次 Bootstrap 更新后进行大量手动检查,而不是根据@Duopixel 的建议直接更新一两行源代码行。我使用 Bootstrap 的部分原因是我不是 CSS 高手,所以我想我现在会使用更简单的解决方案。【参考方案3】:
这是一个很好的例子,说明您可以使用 LESS 版本的 Bootstrap CSS 文件。如何做到这一点如下。
最好将其作为拉取请求提交到 Github 上,这样每个人都可以受益,并且您的“自定义代码”有望成为 Bootstrap 向前发展的一部分。
向variables.less
添加一个变量,指定何时折叠导航栏。类似:@navCollapseWidth: 979px
然后修改responsive-navbar.less
...
将@media (max-width: 979px)
更改为@media (max-width: @navCollapseWidth)
在底部将@media (min-width: 980px)
更改为@media (max-width: @navCollapseWidth - 1)
当然...您必须使用 suggested methods 之一编译 LESS。
【讨论】:
显然 Bootstrap 2.0.4 改变了响应式文件的文件结构。请参阅 bootstrap-sass 作者 @Thomas McDonald 的 comment。尚未对此进行深入研究,但即使使用 SASS 版本,它也可以更轻松地修改阈值。 对不起;我完全错过了问题中的 Sass 评论......我只是专注于基于类别的 Bootstrap。但是,文件结构看起来与我在 Bootstrap 中看到的相同......无论哪种方式,我都会更新我的答案以响应问题。 不用担心。我完全同意,最好的解决方案是让 bootstrap 本地提供一个变量或一系列变量来控制导航栏崩溃阈值。我对 CSS、LESS 或 SASS 或媒体查询的经验不足,无法编写该增强功能;)。【参考方案4】:我怀疑(并希望)这将很快以官方方式实施。与此同时,我只是在做一个简单的 css hack,在下拉按钮上使用 visible-phone,在我放置在导航栏中的第二组按钮上使用 visible-tablet。所以在它看起来像这样之前:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a href="<%= root_url %>" class="brand brandtag"></a>
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse">
<ul class="nav">
<li>Navigation 1</li>
<li>Navigation 2</li>
<li>Navigation 3</li>
</ul>
</div>
</div>
</div>
</div>
现在看起来像:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a href="<%= root_url %>" class="brand brandtag"></a>
<a class="btn btn-navbar visible-phone" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="visible-tablet">
<ul class="nav">
<li>Navigation 1</li>
<li>Navigation 2</li>
<li>Navigation 3</li>
</ul>
</div>
<div class="nav-collapse">
<ul class="nav">
<li>Navigation 1</li>
<li>Navigation 2</li>
<li>Navigation 3</li>
</ul>
</div>
</div>
</div>
</div>
注意元素的顺序很重要,否则你可能会遇到元素进入下一行的问题
【讨论】:
【参考方案5】:通过向主可折叠导航中的项目添加 visible-phone 分类块和 hidden-phone 类,进一步利用 tyler 的技巧,您可以“拉出” ' 甚至在手机导航栏中显示一两个折叠项。
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a href="<%= root_url %>" class="brand brandtag"></a>
<a class="btn btn-navbar visible-phone" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="visible-tablet">
<ul class="nav">
<li>Navigation 1</li>
<li>Navigation 2</li>
<li>Navigation 3</li>
</ul>
</div>
<div class="visible-phone">
<ul class="nav">
<li>Navigation 1</li>
</ul>
</div>
<div class="nav-collapse">
<ul class="nav">
<li class="hidden-phone">Navigation 1</li>
<li>Navigation 2</li>
<li>Navigation 3</li>
</ul>
</div>
</div>
</div>
</div>
【讨论】:
【参考方案6】:引导程序 > 2.1 && 使用较少版本的引导程序 更改 variables.less 中的 @navbarCollapseWidth 变量 重新编译。
2013 年更新:简单的方法
访问http://getbootstrap.com/customize/#less-variables 在表单域中更改@navbarCollapseWidth 点击“编译下载”。(通过评论向 Archonic 致谢)
2014 年更新:Bootstrap 3.1.1 和 3.2 (他们甚至added it to the documentation)
如果您是 customizing 或覆盖/编辑 .less
变量,您正在寻找:
//** Point at which the navbar becomes uncollapsed.
@grid-float-breakpoint: @screen-sm-min;
//** Point at which the navbar begins collapsing.
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
【讨论】:
您可以访问twitter.github.com/bootstrap/customize.html#variables并更改宽度并下载。无需编译。 链接和按钮文本已更新:getbootstrap.com/customize/#less-variables & "编译和下载" 如果您在 boostrap_and_overrides.css.less 中添加类似@navbarCollapseWidth: 600px;
的内容,这也适用于 twitter-bootstrap-rails gem。
这似乎不再是 Bootstrap 3 中的事情。:(
Bootstrap 4 怎么样?【参考方案7】:
bootstrap-sass 将在下一版本 (2.2.1.0) 中支持变量 $navbarCollapseWidth。一旦该版本上线,您就可以对其进行更新以完全满足您的需求!
【讨论】:
请你解释一下你把这个变量放在哪里? 在任何 Bootstrap 导入之前,例如@import "bootstrap";
【参考方案8】:
引导程序 3.x
使用 LESS,您可以更改 @screen-small
的值以定位您的最小尺寸
例如:@screen-small: 600px;
当宽度小于 600 像素时,我只使用它来切换到“微型设备”模式
【讨论】:
你知道如何用 SCSS 做到这一点吗? 对不起,我没有。我认为引导程序是使用 LESS 开发的,因此您可能必须以 .css 方式进行操作(请参阅上面的引导程序 2 答案)【参考方案9】:截至 2013 年 8 月,可以在 http://getbootstrap.com/customize/ 找到 Bootstrap 3“自定义和下载”页面
使用 Bootstrap 3,相关变量是 @grid-float-breakpoint。
以下 Stack Overflow 页面包含更多详细信息:Bootstrap 3 Navbar Collapse
【讨论】:
【参考方案10】:我创建了一个单独的 SCSS 文件,其中列出了引导程序所需的所有部分,这样我就可以根据我们网站的需要打开和关闭部分。这样,我就可以轻松地覆盖断点变量。这是我得到的:
// Core variables and mixins
$grid-float-breakpoint: 991px;
@import "bootstrap/variables";
@import "bootstrap/mixins";
// Reset
@import "bootstrap/normalize";
//@import "bootstrap/print";
// Core CSS
@import "bootstrap/scaffolding";
@import "bootstrap/type";
//@import "bootstrap/code";
@import "bootstrap/grid";
@import "bootstrap/tables";
@import "bootstrap/forms";
@import "bootstrap/buttons";
// Components
@import "bootstrap/component-animations";
@import "bootstrap/glyphicons";
@import "bootstrap/dropdowns";
//@import "bootstrap/button-groups";
//@import "bootstrap/input-groups";
@import "bootstrap/navs";
@import "bootstrap/navbar";
@import "bootstrap/breadcrumbs";
@import "bootstrap/pagination";
@import "bootstrap/pager";
@import "bootstrap/labels";
@import "bootstrap/badges";
//@import "bootstrap/jumbotron";
//@import "bootstrap/thumbnails";
@import "bootstrap/alerts";
//@import "bootstrap/progress-bars";
//@import "bootstrap/media";
//@import "bootstrap/list-group";
@import "bootstrap/panels";
//@import "bootstrap/wells";
@import "bootstrap/close";
// Components w/ JavaScript
@import "bootstrap/modals";
@import "bootstrap/tooltip";
//@import "bootstrap/popovers";
//@import "bootstrap/carousel";
// Utility classes
@import "bootstrap/utilities";
@import "bootstrap/responsive-utilities";
【讨论】:
【参考方案11】:引导 3.x
使用 SASS,您可以更改 $screen-sm 的值以针对您的最小尺寸
示例:$screen-sm: 600px;
您需要将此值放在您的 application.scss 文件中 @import "bootstrap" 之前;
$screen-sm:600px;
@import "bootstrap";
较少以“@”开头的变量只是将它们更改为“$”以在导入之前覆盖它们。
Here is the list of variables.
【讨论】:
这会破坏功能【参考方案12】:这是我的代码(所有其他解决方案都显示时髦的滚动条,因为导航栏下拉,所以我编辑了代码,所以它没有)。我无法发布其他答案,所以我会在这里为其他人找到。我正在使用 Rails 和 Bootstrap 3.0 来做到这一点。
assets/stylesheets/framework 和覆盖粘贴这个:(将最大宽度调整为任何值以实现您的目标。)
@media (max-width: 2500px)
.navbar-header
float: none;
.navbar-toggle
display: block;
.navbar-collapse
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
.navbar-collapse.collapse
display: none!important;
.navbar-collapse.collapse.in
display: block!important;
.navbar-nav
float: none!important;
.navbar-nav>li
float: none;
.navbar-nav>li>a
padding-top: 10px;
padding-bottom: 10px;
【讨论】:
【参考方案13】:只需在您的自定义 style.css 文件中写下这段代码 它会工作的
@media (min-width: 768px) and (max-width: 991px)
.navbar-collapse.collapse
display: none !important;
.navbar-collapse.collapse.in
display: block !important;
.navbar-header .collapse, .navbar-toggle
display:block !important;
.navbar-header
float:none;
.navbar-nav
float: none !important;
margin: 0px;
.navbar-nav
margin: 7.5px -15px;
.nav > li
position: relative;
display: block;
.navbar-nav > li
float: none !important;
.nav > li > a
position: relative;
display: block;
padding: 10px 15px;
.navbar-collapse
padding-right: 15px;
padding-left: 15px;
overflow-x: visible;
border-top: 1px solid transparent;
box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.1) inset;
.nav
padding-left: 0px;
margin-bottom: 0px;
list-style: outside none none;
【讨论】:
【参考方案14】:引导 4.x
在 Bootstrap 4.x 中更改折叠阈值非常简单。有6种情况:
-
始终展开,永不折叠(即断点为 0px):
<nav class="navbar navbar-expand">...</nav>
断点是sm(576px):<nav class="navbar navbar-expand-sm">...</nav>
断点是md(768px):<nav class="navbar navbar-expand-md">...</nav>
断点是lg(992px):<nav class="navbar navbar-expand-lg">...</nav>
断点是xl(1200px):<nav class="navbar navbar-expand-xl">.../nav>
始终折叠,从不展开(即断点为 ∞px)。 :<nav class="navbar">...</nav>
(只需删除 navbar-expand-*
类。在 Bootstrap 4.x 中移动优先)
感谢 Carol Skelly 的这篇文章,我发现 https://medium.com/wdstack/examples-bootstrap-4-navbar-b3c9dc0edc1a
【讨论】:
以上是关于如何使用 Twitter 引导响应更改导航栏折叠阈值?的主要内容,如果未能解决你的问题,请参考以下文章