Question

如何让bootstrap导航条在平板上缩起

不要随便从网上截一段内容来做答案，这只会浪费时间

Answer 1

我自己当时是跟着下面这段代码写的，所以这还是截来的，但bootstrap本身就是固定写法，你让我写我也还是写成这样。
我是觉得挺好懂的，往编辑器里一粘贴，自己修改一下立马就明白了。

<div class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
     　<!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 -->
       <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
         <span class="sr-only">Toggle Navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
       </button>
       <!-- 确保无论是宽屏还是窄屏，navbar-brand都显示 -->
       <a href="##" class="navbar-brand">文字内容</a>
  </div>
  <!-- 屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，再展开。屏幕大于768px时，默认显示。 -->
  <div class="collapse navbar-collapse navbar-responsive-collapse">
        <ul class="nav navbar-nav">
              <li class="active"><a href="##">网站首页</a></li>
              <li><a href="##">系列教程</a></li>
              <li><a href="##">名师介绍</a></li>
              <li><a href="##">成功案例</a></li>
              <li><a href="##">关于我们</a></li>
         </ul>
  </div>
</div>

Answer 2

使用bootstrap的响应式布局来写页面，根据屏幕大小自动调整菜单展示。