无法使侧菜单滚动器停留在顶部。
无法使侧菜单滚动器停留在顶部。
提问于 2014-09-27 02:58:50
我刚从引导3开始，在一个问题上卡住了。我希望有一个边菜单，如在这文档中，它是固定的，在滚动期间，并相应地高亮部分。我成功地完成了一些类似的工作，但是当我将窗口调整到移动大小时，边菜单就会重叠内容，而不是放在上面。如果您选中了链接，当您调整窗口的大小时，sidemenu将位于内容的顶部。
我相信罪魁祸首是affix-top，但我把罪魁祸首留给这里的经验丰富的人。
<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>怎么解决这个问题呢？
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-09-27 17:48:02
您要查找的内容称为CSS媒体查询，它允许您根据颜色、高度和宽度等媒体特性修改样式规则。您链接到的引导页使用最小和最大宽度特性来更改侧边栏的显示方式，您可以在页面底部的CSS文件中看到它。相关代码如下所示：
@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;
}
}我把它简化了一点，但这应该足够让你开始了。当最大宽度小于768 to时，侧边栏宽度将更改为auto，而粘贴代码将使侧边栏保持在页面顶部。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26070858
复制相关文章
相似问题
腾讯云开发者
