bootstrap 3：侧面导航栏折叠到顶部导航栏答案

【问题标题】：bootstrap 3: side navbar on collapse into top navbarbootstrap 3：侧面导航栏折叠到顶部导航栏
【发布时间】：2014-05-15 23:17:23
【问题描述】：

我认为我的措辞不正确，所以让我详细说明一下，我试图让我的侧导航栏折叠成一个按钮，用作顶部按钮导航栏，所以这个 [实际上是导航药片];

但折叠成标题标签：

使用此保管箱功能在顶部。

目前我的代码在侧边栏所在的位置出现下拉菜单

这是我正在使用的代码，除了颜色更改之外，我没有进行任何自定义 CSS 调整。

 <header class="container">
  <nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
      <h1 class="brand"><a href="index.html">bootstrap</a></h1>
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
    </div>
  </nav>
</header>
<div class="container">
  <div class="row">
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"><!--aside-->
      <aside>
        <div class="collapse navbar-collapse" id="collapse">  
        <h4>Menu</h4>
          <ul class="nav nav-pills nav-stacked">
            <li><a href="#">home</a></li>
            <li><a href="#">about</a></li>
            <li><a href="#">gallery</a></li>
            <li><a href="#">CV</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </div>
      </aside>
    </div>

希望这是有道理的谢谢！

【问题讨论】：

标签： html css twitter-bootstrap-3

【解决方案1】：

找到可行的可见和隐藏类

<header class="container"><!--header-->
  <div class="row">
    <div class="col-lg-12">
      <nav class="navbar navbar-default" role="navigation">
        <div class="navbar-header">
          <h1 class="brand"><a href="index.html">John Doe</a></h1>
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
        </div>
      </nav>
    </div>
  </div> 
  <div class="collapse navbar-collapse" id="collapse">  
    <ul class="nav navbar-nav visible-xs">
      <li><a href="gallery1.html">project 01</a></li>
      <li><a href="gallery2.html">project 02</a></li>
      <li><a href="gallery3.html">project 03</a></li>
      &nbsp;
      <li><a href="cv.html">About</a></li>
      <li><a href="#" target="_blank">link</a></li>
      <li><a href="mailto:info@you.com">Contact</a></li>
    </ul>
  </div>
</header><!--header-->
<div class="container"><!--content area-->
  <div class="row">
    <aside class="col-lg-3 col-md-3 col-sm-3"><!--aside-->
      <div class="collapse navbar-collapse" id="collapse"> 
        <ul class="nav nav-pills nav-stacked hidden-xs"> 
          <h4>Works</h4>
            <li><a href="gallery1.html">project 01</a></li>
            <li><a href="gallery2.html">project 02</a></li>
            <li><a href="gallery3.html">project 03</a></li>
            &nbsp;
            <li><a href="cv.html">About</a></li>
            <li><a href="#" target="_blank">link</a></li>
            <li><a href="mailto:info@you.com">Contact</a></li>
        </ul>
      </div>
    </aside><!--aside-->

【讨论】：