Bootstrap自定义CSS特殊性不会覆盖品牌形象

debugcn 发表于 Dev

风神9

好吧，所以我是一个初学者，但是我已经阅读了很多有关这种情况的文章。但是我正试图将我的品牌形象放到我的导航栏中。

我知道这将是愚蠢而渺小的事情。我总是可以覆盖HTML中的样式，但是我更希望在自定义的CSS文件中完成样式。

首先，要消除明显的障碍。我的自定义CSS文件是在头部声明的最后一个CSS。我能够修改页面上的其他元素（如段落元素颜色），因此我知道CSS文件已正确链接。我了解特异性，至少是它的核心概念。

试图解决特异性问题。我首先为自己创建了一个自定义ID，因此在声明的标签内以及在我写的CSS文件中

#logo {
    height: 110%;
}

没有什么。因此，我尝试更加具体，并添加可能指向徽标文件的每个类声明。

#logo .nav .navbar .navbar-inverse .navbar-fixed-top .navbar-brand {
...
}

再次没有运气。我只尝试了.navbar-brand和类的每个组合。我只是不了解层次结构以及谁在优先。我的CSS文件（如果在标题的最后列出）带有正确指定的类声明，应覆盖引导程序的任何代码。

我知道这个问题肯定会被问到很多，但是经过数小时的寻找答案，我在任何地方都找不到。

本节的html代码段

<div class="navbar-header">
    <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a href="#" class="navbar-brand">
        <img id="logo" src="images/logo.png" alt="Limit Magazine">
    </a>
</div>

帖木儿·奥萨奇（Timur Osadchiy）

问题是您要以百分比指定高度，这需要定义父元素的高度。在Bootstrap 3中，的父元素.navbar-brand为div.navbar-header，并且没有定义的高度。因此，这height: 110%;是行不通的。因此，您需要以像素为单位定义徽标的高度，或者以百分比定义徽标的高度，并以像素为单位定义div.navbar-header高度。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。