0

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

所以...

我创建了一个开箱即用的 MVC 4 站点。感谢 SO 上的其他人，我找到了这个简单的示例http://jsfiddle.net/panchroma/rWYQu/并将 About.cshtml 页面的内容替换为 html 代码，在此之前添加了一个部分以容纳 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>

看哪！我得到了我之前编辑的页面所得到的东西：重叠的滚动和内容。将工作示例放入原始 MVC4 应用程序时无法正常工作。我不确定修复方法是什么（我仍在学习）。

解决方法是什么？

4

1 回答 1

0

好的，我把它固定在你的小提琴上。

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

删除宽度 140px; 在 nav-tab 中，稍微扩大一点并使用最大宽度管理小屏幕

 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%;
}

并将引导列更改为适合屏幕：

<div class="col-xs-3" id="myScrollspy">...
<div class="col-xs-9">...
于 2014-09-19T06:19:06.403 回答