0

私は最近いくつかの学習を行っており、ブートストラップはその一部です。scrollspyを使用するのに適していると思ったシンプルな（しかし長い）Webページがありますが、何も正しく動作しませんでした。機能するものから始めようと思いましたが、それでも問題がありました。主な問題は、テキストと 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>

見よ！以前に編集したページで取得していたものとまったく同じものを取得しました: scrollspy とコンテンツが重複しています。バージン 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 に答える