gpt4 book ai didi

javascript - 页面左右两侧的 Bootstrap 词缀

转载 作者:太空宇宙 更新时间:2023-11-04 16:22:13 27 4
gpt4 key购买 nike

这就是我的页面的结构。左栏 (col-lg-3)中心列 (col-lg-6)右栏(col-lg-3)

虽然我的主要内容会在中心栏中,但我希望我的左栏和右栏在某个滚动位置后固定(或粘性)。

我在互联网上找到的大多数解决方案都是将 1 个左列设为粘性。我认为需要完成一些 javascript 工作。

请访问http://www.bootply.com/LiOE57ZlwI .到目前为止,左列的工作方式与我希望的完全一样。我希望右列的行为与左列相同。

另请访问http://www.bootply.com/101100 .我想要完全相同的行为。我不想使用这段代码,因为它在小屏幕尺寸下一团糟。

谢谢

最佳答案

不使用 id,而是使用类:

/* activate sidebar */
$('.sidebar').affix({
offset: {
top: 235
}
});

在 html 中,不要使用 id 并将“侧边栏”放在类中

<div class="col-md-3" id="leftCol">
<ul class="nav nav-stacked sidebar">
<li><a href="#sec0">Section 0</a></li>
<li><a href="#sec1">Section 1</a></li>
<li><a href="#sec2">Section 2</a></li>
<li><a href="#sec3">Section 3</a></li>
<li><a href="#sec4">Section 4</a></li>
</ul>
</div><!--/left-->
<div class="col-md-3" id="leftCol">
<ul class="nav nav-stacked sidebar">
<li><a href="#sec0">Section 0</a></li>
<li><a href="#sec1">Section 1</a></li>
<li><a href="#sec2">Section 2</a></li>
<li><a href="#sec3">Section 3</a></li>
<li><a href="#sec4">Section 4</a></li>
</ul>
</div><!--/right-->

并且 css 也更改为类:

@media (min-width: 979px) {
.sidebar.affix-top {
position: static;
margin-top:30px;
width:228px;
}

.sidebar.affix {
position: fixed;
top:70px;
width:228px;
}
}

.sidebar li.active {
border:0 #eee solid;
border-right-width:5px;
}

Demo here

关于javascript - 页面左右两侧的 Bootstrap 词缀,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28355976/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com