1

我对 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;
    }
}

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

4

0 回答 0