0

ブートストラップを使用して 1 ページのプロジェクトを開始しましたが、navbar スタイル (my-style) を変更するクラス nav を使用する必要があるため、scrollspy に問題があります。
nav クラスなしで scrollspy を動作させる方法や、bootstrap.min.css を変更せずに最初の nav クラスのプロパティを削除する方法を教えてもらえますか?

これはコードです：

<head>
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="css/bootstrap-responsive.min.css" type="text/css">
    <style>
        .navigation {height:50px;vertical-align:middle;}
        .my-style li {display:inline;margin-left:30px;}
        .my-style li a {font-size:22px;color:black;text-decoration:none;text-transform:uppercase;}
        .my-style li a:hover {color: red;}
        .my-style li.active a {color: red;}
    </style>
</head>
<body data-spy="scroll" data-target=".navigation">
    <div class="navbar navbar-fixed-top navigation">
        <div class="navbar-inner">
            <div class="container">
                <ul class="my-style nav">
                    <li><a href="#home">Home</a></li>
                    <li><a href="#about">About Us</a></li>
                    <li><a href="#services">Services</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $('.navigation').scrollspy();
    </scipt>
</body>

ありがとう。

4

1 に答える 1

1

慎重に回避しているため、コアファイルを変更しないことをお勧めします (良いことです)。

これは、以下の説明の実際のデモです

ご存知のように、CSS を記述するときに次のようにします。

div {
  background: #666;
  width: 100px;
  height: 100px;
}

次に、上記のスニペットの後に続く任意の場所でこれを行います。

div {
  background: #000;
  width: 100px;
  height: 100px;
}

後で (以下を意味する) ダーク グレー が定義されるため、<div>は黒 ( ) になると言っても過言ではありません。#000#666

.navそうは言っても、ビルドで他のクラスに出くわす可能性があるため、マークアップの.navすべての に影響を与えずにフックできるように、一意の別のクラスを提供することをお勧め.navします。

新しいスタイルシート (おそらくそれを custom.css と呼びます) を作成し、それへのリンクを要素bootstrap-min.css内の下に置くことをお勧めします。<head>これにより、ブートストラップを使用して特定の在庫にあるものを変更するために行うスタイルは、によって上書きされます。あなたのcustom.cssファイル。

これを試してみてください：

.nav.my-style {
  background: #000;
}

背景が黒くなり、コアのブートストラップ CSS ファイルを変更せずに成功したことがわかります。

これは少し奇妙に見えます。バー全体を変更したい場合は、.navbar-inner を変更します。おそらく変更したいスタイルがすべて含まれているからです。

これが実際の別のフィドルです

これが役に立った場合は投票するか、回答として選択して、StackOverflow を検索している他の人もこれを参考にできるようにすることを忘れないでください。

于 2013-08-02T16:21:04.250 に答える