css - 无法让 bootstrap scrollspy 在新的 MVC 应用程序中工作

Question

我最近一直在学习，bootstrap 是其中的一部分。我有一个简单(但很长)的网页，我认为可以很好地使用 scrollspy，但我无法正常工作。我想我会从一些有用的东西开始，但仍然有麻烦。主要问题是文本和 scrollspy 重叠。我想也许是我搞砸了。

所以...

我创建了一个开箱即用的 MVC 4 站点。由 SO 上的其他人提供，我发现了这个简单的例子 http://jsfiddle.net/panchroma/rWYQu/并用 html 代码替换了 About.cshtml 页面的内容，在此之前添加了一个部分以容纳 css 数据。这是我的:

@{
    ViewBag.Title = "About";
}
<style>
    .content section {
  background-color: pink;
  margin-bottom:20px;
    height:750px;
}
</style>
<div class="container">
    <div class="row">
        <div id="side-nav" class="span3">
            <ul class="nav nav-list affix">
                <li><a href="#one">One</a></li>
                <li><a href="#two">Two</a></li>
                <li><a href="#three">Three</a></li>
                <li><a href="#four">Four</a></li>
                <li><a href="#five">Five</a></li>
            </ul>
        </div>
        <div class="span9 content">
            <section id="one">
                Section 1
            </section>
            <section id="two">
                Section 2
            </section>
            <section id="three">
                Section 3
            </section>
            <section id="four">
                Section 4
            </section>
            <section id="five">
                Section 5
            </section>
        </div>
    </div>
</div>

看哪!我得到的正是我之前编辑过的页面所得到的:重叠的 scrollspy 和内容。放入原始 MVC4 应用程序时，工作示例无法正常工作。我不确定修复方法是什么(我还在学习)。

修复了什么？

Answer 1

好的，我把它固定在你的 fiddle 上。

http://jsfiddle.net/c8gp5oa4/4/

去掉宽度140px；在 nav-tab 中，扩展一点并使用 max-width 管理小屏幕

 ul.nav-tabs {
    margin-top: 20px;
    border-radius: 4px;
    border: 1px solid #ddd;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
    max-width:150px;
    width:100%;
}

并更改 Bootstrap 列以适应屏幕:

<div class="col-xs-3" id="myScrollspy">...
<div class="col-xs-9">...