我试图做使用Twitter的引导网站。 我有相对较少的菜单,所以它的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>
我知道它是与在引导媒体查询,但无法理解。
你会想读出部分: 使用媒体查询在引导网站: http://getbootstrap.com/2.3.2/scaffolding.html#responsive (引导2.3.2) http://getbootstrap.com/越来越-开始/#禁止响应 (引导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 (引导2.3.2)
您可以自定义Twitter的引导CSS从萨斯- Twitter的引导SCSS文件, 编译它,并设置$navbarCollapseWidth
在_variables.scss
到你想要的值...
编辑
作为@Accipheran在评论中指出,为引导3.x中,你应该设置变量的名称是$grid-float-breakpoint
。
这个工作很适合我:
.nav-collapse, .nav-collapse.collapse {
overflow: visible;
}
.navbar .btn-navbar {
display: none;
}
阅读的答案,我相信你是在谈论引导版本2.也许有人寻找一个答案自举3将到达这里。 这个答案就是你!
- 转到自引导的定制页面
- 重新定义为硬编码东西@网格浮子断点值(例如520px)或更小的屏幕尺寸等@屏幕-XS-分钟
- 按下按钮,页面底部的重新编译的css文件
- 从下载的zip文件的那些代替你bootstrap.css和引导-min.css文件。
找到变量:
@电网浮动断点
它被设置为@屏幕-SM,你可以根据你的需要改变它。
如果忽略供应商较少文件,设置变量为0px,例如:
@网格浮子断点:0像素;
如果你想要做的是没有导航崩溃,直到达到一个较小的值,最简单的方法是将头部到Twitter的引导定制页面 ,改变@navbarCollapseWidth
到你想要的值,并下载软件包。 完成。
如果你想定制超出了这个页面允许,你就必须重写或在其他答案中描述定制。
这个例子是从官方网站: http://getbootstrap.com/examples/non-responsive/
这些变化是在非responsive.css但有关的重要组成部分.navbar
是:
body {
padding-top: 70px;
padding-bottom: 30px;
}
.page-header {
margin-bottom: 30px;
}
.page-header .lead {
margin-bottom: 10px;
}
.navbar-collapse {
display: block !important;
height: auto !important;
padding-bottom: 0;
overflow: visible !important;
}
.navbar-nav {
float: left;
margin: 0;
}
.navbar-nav > li {
float: left;
}
如果你想完全禁用崩溃导航栏,在您的自定义LESS文件中添加这个变量:
@grid-float-breakpoint: 0px;
这是我用来引导3.3.4。 这是一个黑客,但它也不是一个为期2天的修复重做的CSS。
@media (min-width: 768px) and (max-width: 979px) {
.navbar-header {
width: 100% !important;
}
.navbar-toggle {
display: inline-block !important;
float: right !important;
}
}
您可能需要调整的选择,但基本上,使头全宽度,然后显示和浮动按钮右侧。