防止菜单在768px显示CSS媒体查询中折叠
esa*_*wan 26 css media-queries responsive-design twitter-bootstrap
我正在尝试使用twitter bootstrap做一个网站.我的菜单相对较少,所以它也适合768px显示器.但默认情况下,在引导程序中,菜单会使用媒体查询进行折叠.我无法阻止此行为.
这是我的HTML
<div class="row">
<div class="span3 logo"><h1><img src="img/logo.png" /></h1></div>
<div class="span9">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<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 nav-pills">
<li><a href="#">Home</a> </li>
<li><a href="#">Services</a> </li>
<li><a href="#">Portfolio</a> </li>
<li><a href="#">Contact Us</a> </li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
我知道它与bootstrap中的媒体查询有关,但无法理解.
小智 32
您可以自定义Twitter的引导CSS 编译从萨斯- Twitter的引导SCSS文件,并设置$navbarCollapseWidth在_variables.scss您需要的值...
编辑
正如@Accipheran在评论中所述,对于Bootstrap 3.x,您应该设置的变量的名称是$grid-float-breakpoint.
- 对于bootstrap 3,您需要设置的变量是`$ grid-float-breakpoint`.此外,您可以在调用@import"bootstrap"行之前的任何位置,在您自己的css文件中设置此变量,而不是进入引导源. (8认同)
- 我有同样的问题.我希望手机的导航栏可以折叠,但不能用于iPad.这就是答案.将`$ navbarCollapseWidth`设置为`767px`.iPad的宽度为768像素,因此不会崩溃.这是正确的答案,比手动覆盖多个媒体查询更清晰. (2认同)
Gal*_*axy 16
您需要阅读以下部分:在引导站点使用媒体查询:http: //getbootstrap.com/2.3.2/scaffolding.html#responsive (Bootstrap 2.3.2) http://getbootstrap.com/ get-started/#disable-responsive(Bootstrap 3)
您希望使用相关的媒体查询来覆盖视口缩小时引导程序添加的样式.
// Landscape phones and down
@media (max-width: 480px) { ... }
// Landscape phone to portrait tablet
@media (max-width: 768px) { ... }
// Portrait tablet to landscape and desktop
@media (min-width: 768px) and (max-width: 980px) { ... }
// Large desktop
@media (min-width: 1200px) { .. }
如果您不希望导航栏折叠,请从类名中删除"折叠".你可能应该摆脱:
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
简而言之,看一下这些文档,这里有一个标题为"可选的响应式变体"的部分:http: //getbootstrap.com/2.3.2/components.html#navbar(Bootstrap 2.3.2)
- 下面的maks答案是最直接的.即使您静态使用bootstrap,也可以在http://twitter.github.com/bootstrap/customize.html#variables更改@navbarCollapseWidth并下载自定义版本. (2认同)
小智 9
这对我很有用:
.nav-collapse, .nav-collapse.collapse {
overflow: visible;
}
.navbar .btn-navbar {
display: none;
}
- 这是正确的答案.把它放到@media(最小宽度:768px)和(最大宽度:979px),它完美地运行.无需更改引导程序文件,并完成引导程序的工作方式,具有覆盖功能. (3认同)
- @SerjSagan两个选项都不适用于Bootstrap 3.我仍然可以获得更小尺寸的垂直菜单. (2认同)
阅读答案,我相信你在谈论Bootstrap版本2.也许有人在寻找Bootstrap 3的答案.这个答案适合你!
- 转到Bootstrap自定义页面
- 重新定义硬编码(例如520px)或更小屏幕尺寸(如@ screen-xs-min)的@ grid-float-breakpoint值
- 按页面底部的按钮重新编译css文件
- 用你下载的zip文件替换你的bootstrap.css和bootstrap-min.css文件.