Question

好的，所以我是初学者，但我已经在这种情况下阅读了不错的数据。但是我试图将我的品牌形象放在我的导航栏中。

我知道这将是一个愚蠢和小的东西。我总是可以覆盖HTML中的样式，但我更喜欢在自定义的css文件中完成它。

首先，首先要明确一点。我的自定义CSS文件是头部中声明的最后一个css。我可以修改页面上的其他元素，如段落元素颜色，所以我知道CSS文件已正确链接。我理解特异性，至少是它的核心概念。

试图解决特异性问题。我首先在我声明的标签内和我写的CSS文件中为我做了一个自定义id

#logo {
    height: 110%;
}

无。所以我尝试更具体，并添加可能指向徽标文件的每个类声明。

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

再一次没有运气。我只尝试过.navbar-brand和每一个类的组合。我只是不了解层次结构，谁更优先。我的CSS文件，如果在标题的最后列出，使用正确的Specified类声明应该覆盖任何bootstrap的代码。

我知道这个问题一定会被问到很多，但是经过几个小时的搜索后，我还没有找到答案。

部分的片段

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

Answer 1

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

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

1 个答案: