Question

我刚开始使用bootstrap 3而且遇到了问题。我希望有一个像this文档中的侧边菜单，它在向下滚动时定位固定，并相应地突出显示部分。我已经设法完成了与此类似的操作，但是当我将窗口调整为移动大小时，侧边菜单会重叠内容而不是顶部。如果您检查了链接，则在调整窗口大小时，侧面菜单会显示在内容之上。

我认为这里的罪魁祸首是affix-top，但我将它留给stackoverflow中有经验的人

<body data-spy="scroll" data-target="#myScrollspy">
    <!-- Page Content -->
    <div class="container">

        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">Title
                    <small>Subheading</small>
                </h1>
            </div>
        </div>

        <!-- Content Row -->
        <div class="row">
            <!-- Sidebar Menu -->
            <div class="col-md-2" id="myScrollspy">
                <ul class="nav nav-tabs nav-stacked affix-top" data-spy="affix" >
                    <li class="active"><a href="#section-1">Section One</a></li>
                    <li><a href="#section-2">Section Two</a></li>
                    <li><a href="#section-3">Section Three</a></li>
                    <li><a href="#section-4">Section Four</a></li>
                    <li><a href="#section-5">Section Five</a></li>
                </ul>
            </div>

            <!-- Content Column -->
            <div class="col-md-9">
                <h2 id="section-1">Section One</h2>
                <h2 id="section-2">Section Two</h2>
                <h2 id="section-3">Section Three</h2>
                <h2 id="section-4">Section Four</h2>
                <h2 id="section-5">Section Five</h2>
            </div>
        </div>
    </div>  
</body>

如何解决这个问题？

Answer 1

您正在寻找的内容称为CSS媒体查询，它允许您根据媒体功能（如颜色，高度和宽度）修改样式规则。您链接到的Bootstrap页面使用最小和最大宽度功能来更改侧边栏的显示方式，您可以在页面底部附近的CSS file中看到。相关代码如下所示：

@media (min-width: 768px) {
    /* Adjust sidenav width */
    .bs-docs-sidenav {
        width: 166px;
        margin-top: 20px;
    }
    .bs-docs-sidenav.affix {
        top: 0;
    }
}
@media (max-width: 767px) {
    /* Sidenav */
    .bs-docs-sidenav {
        width: auto;
        margin-bottom: 20px;
    }
    .bs-docs-sidenav.affix {
        position: static;
        width: auto;
        top: 0;
    }
}

我已经简化了一点，但这应该足以让你开始。当最大宽度小于768px时，侧边栏宽度将更改为自动，并且词缀代码将侧边栏保持在页面顶部。

不能让侧面菜单scrollspy粘在上面

1 个答案: