bootstrap：使用 scrollspy 时如何设计导航栏？答案

【问题标题】：bootstrap: how to stylise navbar when using scrollspy?bootstrap：使用 scrollspy 时如何设计导航栏？
【发布时间】：2013-08-02 14:05:15
【问题描述】：

我已经使用 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>

谢谢。

【问题讨论】：

嗨@Mario，如果我理解正确，您想在不修改bootstrap-min.css 的情况下设置.nav 的样式吗？这很简单，只需将您想要修改的关于 bootstrap 的所有内容添加到新的 .CSS 文件中，并将其放在 bootstrap-min.css 文件下方，以便添加到其中的样式进行剪切（意味着它们正确级联）跨度>
所以我理解正确？如果是这样，我将发布对此的答案，以便人们知道。

标签： twitter-bootstrap scrollspy

【解决方案1】：

最好不要修改核心文件，因为您要小心避免（好东西）。

Here is a working demo of the explanation below

如您所知，在编写 CSS 时，如果您这样做：

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

然后在上述 sn-p 之后的任何地方执行此操作：

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

可以肯定地说，<div> 将是黑色的 (#000)，因为它是稍后定义的（如下所示）深灰色 #666。

话虽如此，由于您可能会在构建中遇到其他 .nav 类，因此您最好为您的 .nav 提供另一个独特的类，这样您就可以在不影响所有 .nav 的情况下挂钩它是在你的标记上。

我建议您制作一个新样式表（可能称为：custom.css）并在您的bootstrap-min.css 元素内的bootstrap-min.css 下方放置一个指向它的链接，这样您可以修改任何样式来修改库存带有引导程序的某些内容将被您的custom.css 文件覆盖。

试试这个：

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

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

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

Here is another fiddle of that in action

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

【讨论】：