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

Question

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

sme*_*eeb 2 html css twitter-bootstrap twitter-bootstrap-3

这是我的导航栏:

<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. -->

Run Code Online (Sandbox Code Playgroud)

我的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);
}

Run Code Online (Sandbox Code Playgroud)

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

我想在这里做几件事:

我试图使头高,尝试它,你可以看到style.css与.navbar-fixed-top规则试图将头设置为200像素一分钟; 和
我试图设置链接的颜色("学习","联系人","登录|注册")红色,你可以看到在style.css与.navbar-nav > a规则; 和
我正在尝试将"登录|注册"链接固定在container-fluiddiv 的右侧),正如您在HTML中看到我使用的pull-right

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

Answer 1

APA*_*AD1 6

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

例如,要定位标题中的链接,请使用以下命令:

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

Run Code Online (Sandbox Code Playgroud)

更新了JSFiddle

这正是我的意思@smeeb.实际上很容易在开发人员窗口中看到这一点.检查元素并查看右侧的CSS规则.如果您看到自己定义的CSS规则并且规则具有删除线,则表示它被另一个规则覆盖.然后看看什么覆盖了你的风格并使用相同的选择器.这是你原来的JSFiddle的截图,向你展示我的意思:http://s11.postimg.org/hwacfedf7/specificity.jpg (2认同)

归档时间：	11 年，2 月前
查看次数：	95 次
最近记录：	11 年，2 月前