Question

如果你看看这里：

http://www.dealerbyte.co.uk/

我刚刚在我的本地服务器上测试了一些东西，由于某种原因，我的品牌类溢出了容器，我不明白为什么。我尝试过改变CSS中的一些东西，但我似乎无法将其融入其中。我怀疑它是填充或边缘问题。

这是我的HTML：

<nav class="navbar navbar-default affix-top" data-spy="affix" data-offset-top="100" role="navigation">
<div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-6">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button> 
        <a class="navbar-brand" href="/"><img src="media/images/logo.png" alt="Driven Car Sales Logo" class="img-rounded logo-nav navbar-brand"></a>
    </div>
    <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#">Home</a>
            </li>
            <li><a href="#">Link</a>
            </li>
            <li><a href="#">Link</a>
            </li>
        </ul>
    </div><!-- /.navbar-collapse -->
</div>

这是我的CSS：

.logo-custom {
height: 2em;
}

.logo-nav {
height: 4em;
}
.brand {
font-size: 2em;
color: #ff0066;
margin: 20px 0 25px;
}
.navbar-brand {
opacity: 0;
color: #ff0066;
transition: opacity .5s linear;
}
.navbar {
border-radius: 0;
border-left: none;
border-right: none;
}
nav.affix {
top: 0;
width: 100%;
z-index: 1000;
}
nav.affix .navbar-brand {
opacity: 1;
}

知道为什么会这样，我很难过吗？感谢

Answer 1

那是因为徽标溢出了导航栏。对于简单的修复，您可以使用否定margin-top至.logo-nav，并将padding-top设置为0。您还需要将height .logo-nav更改为2em，因为4em会使其变得如此之大，甚至超过.logo-custom。

.logo-nav {
    height: 2em;
    padding: 0 15px;
    margin-top: -8px;
}

这是demo on JSFiddle。

希望有所帮助：）

Answer 2

是的，我遇到了问题你可以解决，而不是从你的徽标周围的标记中删除.navbar-brand类，只需将该类提供给徽标就可以了

<nav class="navbar navbar-default affix-top" data-spy="affix" data-offset-top="100" role="navigation">
<div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-6">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
    <!-- I mean Here -->
        <a href="/"><img src="media/images/logo.png" alt="Driven Car Sales Logo" class="img-rounded logo-nav navbar-brand"></a>
    </div>
    <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#">Home</a>
            </li>
            <li><a href="#">Link</a>
            </li>
            <li><a href="#">Link</a>
            </li>
        </ul>
    </div><!-- /.navbar-collapse -->
</div>

并知道.navbar-brand类字体大小为12px

.navbar-brand {
float: left;
height: 50px;
padding: 15px 15px;
font-size: 12px;
line-height: 24px;
}

Answer 3

虽然我没有得到你的问题，但是我试着帮助你，如果你说为什么logo没有在品牌中显示答案就是这个

.navbar-brand不透明度等于0

.navbar-brand {
opacity: 0;
color: #ff0066;
transition: opacity .5s linear;
}

删除

.navbar-brand {
color: #ff0066;
transition: opacity .5s linear;
}

从上面删除图片你在品牌中添加了两张图片，另一张在导航大图片上面

品牌类在引导程序中位于导航栏之外

3 个答案: