0

我已经使用 bootstrap 启动了一个单页项目，但我在使用 scrollspy 时遇到了一些问题，因为我需要使用类 nav 来改变我的导航栏样式（我的样式）。
谁能建议如何在没有导航类的情况下使 scrollspy 工作，或者在不更改 bootstrap.min.css 的情况下删除初始导航类属性的方法？

这是代码：

<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>您为修改某些带有 bootstrap 的某些内容所做的任何样式都将被覆盖你的custom.css文件。

试试这个：

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

您将看到背景将变黑，并且您成功地做到了这一点，而无需修改核心引导 CSS 文件。

现在这看起来有点奇怪，如果您想要修改整个栏，那么您将修改 .navbar-inner，因为它包含您可能想要更改的所有样式。

这是另一个在行动中的小提琴

如果这有帮助，请记住投票或选择它作为答案，以便其他搜索 StackOverflow 的人也可以发现这很有帮助。

于 2013-08-02T16:21:04.250 回答