品牌课坐在导航栏之外的引导

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

虽然我没有得到你的问题又是什么，我想帮助你，如果你说这是为什么的标志是不是在品牌表示答复是这是

的.navbar-brand不透明度为0

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

删除

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

删除从上面您在品牌添加了两个图像中的一个图像和另一个是导航栏上方的大号

Answer 2

这是因为徽标溢出了导航栏。对于简单的修复，您可以使用负数margin-top至.logo-nav，并将padding-top设置为0。您还可以将.logo-nav的height更改为2em，因为4em会使其变大，甚至比.logo-custom更大。

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

这里是demo on JSFiddle。

希望它能帮助:)

Answer 3

是得到了你可以在你的标志去除标签.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 class size-size of 12px

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