twitter-bootstrap 修复了从某个位置开始的引导程序中的侧边栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16535151/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fixed sidebar in bootstrap that starts at a certain position
提问by user2371301
Just in case someone finds this question searching for an answer, thanks to timemachine3030I now have a solution for this problem.
万一有人发现这个问题正在寻找答案，多亏了timemachine3030，我现在有了这个问题的解决方案。
The sidebar looks like this now:
侧边栏现在看起来像这样：
<div class="container-fluid">
<div class="row-fluid">
<div class="span4">
<ul class="nav nav-list" data-spy="affix" data-offset-top="750">
<li><a href="#one"><i class="icon-chevron-right"></i> One</a></li>
<li><a href="#two"><i class="icon-chevron-right"></i> Two</a></li>
<li><a href="#three"><i class="icon-chevron-right"></i> Three</a></li>
<li><a href="#four"><i class="icon-chevron-right"></i> Four</a></li>
<li><a href="#five"><i class="icon-chevron-right"></i> Five</a></li>
<li><a href="#six"><i class="icon-chevron-right"></i> Six</a></li>
<li><a href="#seven"><i class="icon-chevron-right"></i> Seven</a></li>
</ul>
</div><!--/span-->
We also added top: 60px;to the .affixin the bootstrap.css file With this plus what I already had (shown below) I have successfully re-created the "sticky" sidebar wich Bootstrap uses: http://twitter.github.io/bootstrap/javascript.html#affix
我们还在bootstrap.css 文件中添加top: 60px;了.affix这个加上我已经拥有的（如下所示）我已经成功地重新创建了 Bootstrap 使用的“粘性”侧边栏：http: //twitter.github.io/bootstrap/javascript .html#附加
timemachin3030: THANK YOU SO MUCH FOR THIS SOLUTION! I HOPE YOU DON'T MIND LINKING TO YOUR PROFILE!
timemachin3030：非常感谢您提供此解决方案！我希望你不介意链接到你的个人资料！
Ok I am using Bootstrap,
好的，我正在使用 Bootstrap，
Perfect example of what I am trying to achieve: http://twitter.github.io/bootstrap/components.html
我试图实现的完美示例：http: //twitter.github.io/bootstrap/components.html
I have a fixed sidebar navigation menu that is fixed meaning it scrolls with the page.
我有一个固定的侧边栏导航菜单，它是固定的，这意味着它会随着页面滚动。
Right now it starts at the top of the page "on-top of the hero unit" as you scroll down the page it follows the page.
现在，当您向下滚动页面时，它会从页面顶部的“英雄单位顶部”开始。
I want it to start at the beginning of the real content, Where the navigation actually starts.
我希望它从真正内容的开头开始，导航实际开始的地方。
Here is a portion of the html page using bootstrap.
这是使用引导程序的 html 页面的一部分。
<div class="hero-unit">
<div class="container-fluid">
<div class="row-fluid">
<div class="span8">
<div id="myCarousel" class="carousel slide">
<!--Carousel items -->
<div class="carousel-inner">
<div class="active item"><img src="img/carousel/photo1.jpg"></div>
<div class="item"><img src="img/carousel/photo2.jpg"></div>
<div class="item"><img src="img/carousel/photo3.jpg"></div>
</div>
</div>
</div>
<div class="span4">
<h2>The Green Panda</h2>
<p>Professional Web Design</p>
<a href="#scrollhere" class="btn btn-primary btn-large">Learn More</a>
</div>
</div>
</div>
</div>
<div>
<h2 align="center" id="scrollhere">Professional Web Design</h2>
<h3 align="center">Powerful. Professional. Affordable</h3>
<hr>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span4">
<div class="well sidebar-nav-fixed" data-spy="affix" data-offset-top="300">
<ul class="nav nav-list">
<li class="nav-header">Sidebar</li>
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="nav-header">Sidebar</li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="nav-header">Sidebar</li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div><!--/.well -->
</div><!--/span-->
<div class="span8">
<h3>What We Do</h3>
<p>Here at The Green Panda, we provide custom website development as our main strong hold. Web design was the primary reason for opening The Green Panda!</p>
<p>Throughout the last year we have worked very hard to provide our clients with more solutions. All of our hard work has paid off, we now provide an on line site builder and custom printed promotional products. This is on-top of our custom web design we have provided from day one.</p>
<h3>Our Solutions</h3>
<p>Once a year we distribute a survey to our clients, the bars below dictate what our clients have ranked us within the last year on the solutions we offer. We believe it's important for you as a future client to have a firm understanding of what we are capable of.Click on each bar to find out more information.</p>
<strong>Web Design</strong> 100%
<div class="progress progress-success progress-striped active">
<div class="bar" style="width: 100%;" id="webdesign-bar" rel="popover" data-content="We are very proud to present a perfect rating in web design for the year 2012!" data-original-title="Our Main Focus" data-placement="top"></div>
</div>
To get the sidebar to be fixed I added this extra css:
为了修复侧边栏，我添加了这个额外的 css：
.sidebar-nav-fixed {
position: fixed;
top: 60px;
width:21.97%;
}
@media (max-width: 767px) {
.sidebar-nav-fixed{
width:auto;
}
}
@media (max-width: 979px) {
.sidebar-nav-fixed {
position: static;
width: auto;
}
}
采纳答案by timemachine3030
Lucky for you that is built into Bootstrap. It is a feature called 'Affix' see: http://twitter.github.io/bootstrap/javascript.html#affixfor how to use it!
幸运的是，它内置于 Bootstrap 中。这是一项名为“附加”的功能，请参阅：http: //twitter.github.io/bootstrap/javascript.html#affix了解如何使用它！
