我正在使用导航栏。我已经看到，导航栏以移动大小或col-xs大小折叠。但是我想让这个导航器也因为中型和中型而崩溃。小型设备。我怎样才能做到这一点。
可以从实际网站查看：https://dl.dropboxusercontent.com/u/86581418/consegna/blog.html
代码：
<div class="col-md-7 col-sm-12 col-xs-12" style="padding-top: 40px;">
<nav role="navigation" class="navbar navbar-default navbar_top" >
<div class="navbar-header" style="margin-top: -70px;">
<button type="button" data-target="#myNavbar" data-toggle="collapse" class="navbar-toggle" style="border-color:#fff;">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar" style="background-color:#fff;"></span>
<span class="icon-bar" style="background-color:#fff;"></span>
<span class="icon-bar" style="background-color:#fff;"></span>
</button>
</div>
<div id="myNavbar" class="collapse navbar-collapse top_nav">
<nav class="nav_top">
<ul class="nav navbar-nav top_nav_block">
<li ><a href="#">HOME</a></li>
<li><a href="gallery.html">GALLERY</a></li>
<li class="active"><a href="blog.html">BLOG</a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</nav>
</div>
</nav>
</div>
答案 0 :(得分：3)
从技术上讲，@ cvrebert的回答是正确的。但是，您可能不像其他开发人员那样精通LESS。如果是这种情况，您可以添加一个自定义CSS文件，以便在包含bootstrap css文件后包含在<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<link rel="stylesheet" type="text/css" href="css/resets.css" />
<link rel="stylesheet" type="text/css" href="css/chui-android-3.8.5.css" />
<link rel="stylesheet" type="text/css" href="css/leaflet.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="js/chui-3.8.5.min.js"></script>
<script type="text/javascript" src="js/leaflet.js"></script>
<script type="text/javascript" src="js/d3.min.js"></script>
<script type="text/javascript" src="js/gps.js"></script>
<script type="text/javascript" src="js/stopwatch.js"></script>
<script type="text/javascript" src="js/map.js"></script>
<script type="text/javascript" src="js/storage.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<title>Simply running</title>
</head>
<body>
<script>
$(function() {
var opts = {
tabs : 4,
icons : ["run", "statistics", "settings"],
labels : ["Run", "Statistics", "Settings"],
selected : 1
};
$.UITabbar(opts);
});
onload_run();
</script>
<!-- The run/home page--->
<nav>
<h1>Simply Running</h1>
</nav>
<article id="Run" class="current">
<p id="stopwatch">Hello world!</p>
<input type="button" value="Start" onclick="start();">
</article>
<!-- The statistics page--->
<nav class="next">
<h1>Statistics</h1>
</nav>
<article id="statistics" class="next">
<!-- The settings page--->
</article>
<nav class="next">
<h1>Settings</h1>
</nav>
<article id="settings" class="next">
</article>
</body>
</html>
中。在自定义CSS中，您可以添加其他媒体查询。还有另一篇描述此内容的stackoverflow文章： Change bootstrap navbar collapse breakpoint without using LESS 。该文章的答案将使您接近您想要的。希望这会有所帮助。
答案 1 :(得分：1)
阅读文档？
Changing the collapsed mobile navbar breakpoint
当视口比
@grid-float-breakpoint更窄时，导航栏会折叠到其垂直移动视图中，并且当视口至少为 {{时，会扩展为其水平非移动视图宽度为1}} 。 在较少来源中调整此变量以控制导航栏折叠/展开的时间。默认值为768px（最小的“小”或“平板电脑”屏幕）。