Question

我认为我没有正确地说明这一点，所以让我详细说明我试图将我的侧导航栏折叠成一个按钮作为顶部按钮导航栏，这样[实际上导航 - 丸]

left sidebar http://i59.tinypic.com/msyrdg.png

但是将其折叠到标题标记中：

hamburger http://i59.tinypic.com/14toiv4.png

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

目前我的代码的下拉列表出现在侧边栏

的位置

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

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

1 个答案: