Question

我对Bootstrap 2比较熟练，通常可以让它做我想做的事，但我遇到了Bootstrap 3的问题。

我正试图在页面上方有一个顶部导航，并在其下面有一个辅助顶部导航。当屏幕足够大时，辅助顶部导航应该弹出作为侧边栏。

我很困惑，不知道从http://getbootstrap.com/examples/offcanvas/到哪里去。

谢谢！

编辑：这就是我所拥有的。它显示了这个想法，但导航定义了两次。看一看，你会明白我的意思。 http://jsfiddle.net/xwp7S/2/

我将侧边栏定义为：

        <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
            <div class="well sidebar-nav">
                <ul class="nav">
                    <li>Sidebar</li>
                    <li class="active"><a href="#">Link 1</a></li>
                    <li><a href="#">Link 2</a></li>
                    <li><a href="#">Link 3</a></li>
                    <li><a href="#">Link 4</a></li>
                    <li><a href="#">Link 5</a></li>
                    <li><a href="#">Link 6</a></li>
                    <li><a href="#">Link 7</a></li>
                </ul>
            </div>
            <!--/.well -->
        </div>

并将顶部导航定义为

<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".topnav-collapse">
               <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="collapse navbar-collapse topnav-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </div>
        <!-- /.nav-collapse -->
    </div>
    <!-- /.container -->
</div>

和

的额外css

 @media screen and (max-width: 768px) {
    #sidebar {
        display: none;
    }
}

@media screen and (min-width: 768px) {
    #topsidebar {
        display: none;
    }
}

如何解决两次不定义导航的问题？

Bootstrap 3 topnav在小屏幕时变成侧边栏？

0 个答案: