Question

我已经启动了一个带有bootstrap的单页项目，我有一些关于scrollspy的问题，因为我需要使用类nav来改变我的navbar样式（my-style）。
任何人都可以建议如何在没有导航类的情况下使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>

感谢。

Answer 1

不要修改核心文件是个好主意，因为你要小心避免（好东西）。

Here is a working demo of the explanation below

如您所知，在执行此操作时编写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，因为它是您可能想要更改的所有样式的那个。

Here is another fiddle of that in action

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

bootstrap：如何在使用scrollspy时设置导航栏的样式？

1 个答案:

Here is a working demo of the explanation below

Here is another fiddle of that in action