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

Question

我不认为我已经说明了这一点，所以让我详细说明我试图让我的侧导航栏折叠成一个按钮作为顶部按钮导航栏，所以这[实际上是nav-pills];

但是将其折叠到标头标签中：

在这个保管箱功能的顶部。

目前我的代码下拉条件出现在侧边栏的位置

这是我正在使用的代码，除了颜色变化之外，我没有自定义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>

希望这是有道理的谢谢！

Answer 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-->