0

ブートストラップ 3 から scrollspy を動作させることができません。stackoverflow の回答を含め、多数のフォーラムから読んだことはすべて試しましたが、成功しませんでした。

したがって、誰かがこのコードを見て助けてくれれば、それは素晴らしいことです。

コードは次のとおりです。

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">
        <link rel="shortcut icon" href="../../assets/ico/favicon.png">

        <title>Starter Template for Bootstrap</title>

        <!-- Bootstrap core CSS -->
        <link href="../../dist/css/bootstrap.css" rel="stylesheet">

        <!-- Custom styles for this template -->
        <link href="starter-template.css" rel="stylesheet">

        <style type="text/css">
          body {
            text-align: center;
          }

          #one, #two, #three, #four {
            height: 800px;
          }

        </style>

        <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
          <script src="../../assets/js/html5shiv.js"></script>
          <script src="../../assets/js/respond.min.js"></script>
        <![endif]-->
      </head>

      <body data-spy="scroll" data-target="#side-nav" data-offset="0">

    <nav id="side-nav">
        <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>
        </ul>
    </nav>

      <section id="one">one section</section>
      <section id="two">two section</section>
      <section id="three">three section</section>
      <section id="four">four section</section>


      </body>



        <!-- Bootstrap core JavaScript
        ================================================== -->
        <!-- Placed at the end of the document so the pages load faster -->
        <script src="../../assets/js/jquery.js"></script>
        <script src="../../dist/js/bootstrap.min.js"></script>


      </body>
    </html>

前もって感謝します！！乾杯！

編集: 次の URL で動作していないことを確認できます: http://zumuha.site40.net/bootstrap/examples/starter-template/

乾杯！

4

1 に答える 1

3

Inspect Element を開いて#side-navのを調べると、問題は非常に明確になりますli。.active彼らが提供するクラスのスタイルをスタイルする必要があります。

@PSLは、あなたが何かを見逃したと言い、スタイル付きの.activeクラスを提供すると言いました。しかし、あなたのウェブサイトに基づいて、Inspect Element にスタイルが表示されません。（公式の圧縮されたWebサイトにも.activebootstrap.cssにスタイルがありません。スタイルを含むカスタムbs-doc.cssに追加されました）

正しいトラブルシューティングは、css を自分でスタイリングすることです。

これは#side-nav > .nav > .activecssにあります。を入れてみてくださいfont-weight: bold;。

以前にも同じ問題が発生したため、公式の圧縮されたブートストラップ Web サイトをダウンロードして変更することをお勧めします。ここでのヒント: Bootstrap はバージョンが変わらなくても頻繁に変更されるため、最新の css をダウンロードして試すこともできます。

于 2013-09-23T00:31:02.493 に答える