好吧,所以我是一个初学者,但是我已经阅读了很多有关这种情况的文章。但是我正试图将我的品牌形象放到我的导航栏中。
我知道这将是愚蠢而渺小的事情。我总是可以覆盖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>
问题是您要以百分比指定高度,这需要定义父元素的高度。在Bootstrap 3中,的父元素.navbar-brand
为div.navbar-header
,并且没有定义的高度。因此,这height: 110%;
是行不通的。因此,您需要以像素为单位定义徽标的高度,或者以百分比定义徽标的高度,并以像素为单位定义div.navbar-header
高度。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句