Bootstrap sidenav scroll

时间:2016-04-18 18:49:19

标签: javascript css twitter-bootstrap scroll

我正在使用this引导程序模板(我使用的githubemptypage代码)并且大部分只对侧边栏感兴趣。但是,如果侧面菜单太长,我似乎无法使用scrollspy工作。这就是我所拥有的:

<div class="col-md-3 left_col">
    <div class="left_col scroll-view">

        <div class="navbar nav_title" style="border: 0;">
            <a href="#" class="site_title"><i class="fa fa-cogs"></i> <span>Engine of Travel</span></a>
        </div>
        <div class="clearfix"></div>

        <!-- menu prile quick info -->
        <div class="profile">
            <div class="profile_pic">
                <img src="images/img.jpg" alt="..." class="img-circle profile_img">
            </div>
            <div class="profile_info">
                <span>Welcome,</span>

                <h2>User</h2><br/>
            </div>
        </div>
        <!-- /menu quick info -->

        <br/>

        <!-- sidebar menu -->
        <div id="sidebar-menu" class="main_menu_side hidden-print main_menu">

            <div class="menu_section">
                <h3>Side Side</h3>
                <ul class="nav side-menu">
                    <li><a><i class="fa fa-flag"></i> Sidething <span class="fa fa-chevron-down"></span></a>
                        <ul class="nav child_menu" data-spy="scroll" data-target="#child_menu" style="display: none">
                            <li><a href="#">Option 2</a>
                            </li>
                            <li><a href="#">Option 3</a>
                            </li>
                            ...
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

使用Javascript:

<script type="application/javascript">
    $("#child_menu").scrollspy();
</script>

生成的菜单显示的元素可以放在屏幕上,然后在图像中看到“中断”。什么是滚动工作的最佳方式。

broken scroll

0 个答案:

没有答案