Updated JSFiddle

Question

这是我的导航栏：

<body>
    <div class="wrapper">
        <div class="container-fluid">
            <nav class="navbar navbar-inverse">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">My<b>App</b></a>
                </div>
                <div>
                    <ul class="nav navbar-nav">
                        <li><a href="#">Learn</a></li>
                        <li><a href="#">Contact</a></li>
                        <li class="pull-right"><a href="#">Sign In | Register</a></li>
                    </ul>
                </div>
            </nav>

        <!-- The rest omitted for brevity. -->

我的style.css：

* {
    margin: 0;
}

html, body {
    height: 100%;
}

.navbar-fixed-top {
    min-height: 200px;
}

.navbar-nav > a {
    color: rgb(255,0,0);
}

.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
}

.footer, .push {
    height: 4em;
}

.footer {
    background: rgb(0, 100, 255);
}

相应的jsFiddle：http://jsfiddle.net/srhwgdsr/

我想在这里做几件事：

我正在尝试使标题更高，您可以在style.css中看到.navbar-fixed-top规则尝试将标题设置为最小200px;和
我正在尝试将链接的颜色（“学习”，“联系人”，“登录|注册”）设置为红色，您可以在style.css中看到.navbar-nav > a规则;和
我正在尝试将container-fluid div右侧的“登录|注册”链接固定，正如您在使用pull-right

为什么这些尝试都没有起作用？我没有正确配置Bootstrap 3吗？是某种“锁定”的东西？

Answer 1

这是一个特殊性问题。 Bootstrap的CSS比你的更具体，所以它先于。如果使用Bootstrap中定义的相同选择器，它将正常工作。此外，您错误地使用JSFiddle。不应该有任何元/头标记，并且应该在侧边栏中定义外部资源，而不是内联。

例如，要定位标题中的链接，请使用：

.navbar-inverse .navbar-nav>li>a {
    color: rgb(255,0,0);
}

Bootstrap 3导航栏无法响应样式更改

1 个答案:

Updated JSFiddle