1

我正在使用 Bootstrap 3 创建我妻子的网站。我的页面顶部有一个固定的导航栏，并且想在左侧修复一个过滤器菜单。我有这个，当屏幕尺寸大，中甚至小时，它似乎运行和工作正常，但是当我的顶部导航上的 -collapse 菜单在我的过滤器上的链接中踢时变得多余并且实际上没有做任何事情。我不太确定我做错了什么。有任何想法吗？我在这里添加了一个 jsfiddle。

http://jsfiddle.net/iameuanmackay/mhk11q52/

代码在这里：

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-3 col-md-7 col-md-offset-3 col-lg-6 col-lg-offset-3">
                 <h1>logo</h1>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-3 col-md-7 col-md-offset-3 col-lg-6 col-lg-offset-3">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
</button> <a class="navbar-brand active" href="index.html">home</a>

                </div>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="portfolio.html">portfolio</a>
                        </li>
                        <li><a href="blog.html">blog</a>
                        </li>
                        <li><a href="contact.html">contact</a>
                        </li>
                    </ul>
                </div>
                <!--/.nav-collapse -->
            </div>
            <!-- rheader -->
        </div>
        <!--end col -->
    </div>
    <!-- end row -->
</div>
<!-- end container -->
<!-- Begin page content -->
<div class="container-fluid">
    <div id="portfolio">
        <div class="row">
            <div class="col-xs-1 col-xs-offset-1 col-sm-1 col-sm-offset-2">
                <div data-spy="affix" data-offset-top="0" data-offset-bottom="200">
                    <ul id="filter">
                        <!--This is where the filter links go and and the affix seems to have gone wrong -->
                        <li style="list-style-type: none" class="all"><a href="#">all</a>
                        </li>
                        <li style="list-style-type: none" class="people"><a href="#people">people</a>
                        </li>
                        <li style="list-style-type: none" class="things"><a href="#things">things</a>
                        </li>
                    </ul>
                </div>
            </div>

任何指针将不胜感激。

4

0 回答 0