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

风神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-branddiv.navbar-header,并且没有定义的高度。因此,这height: 110%;是行不通的。因此,您需要以像素为单位定义徽标的高度,或者以百分比定义徽标的高度,并以像素为单位定义div.navbar-header高度。

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

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

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章