品牌图片太大，并且未在Bootstrap导航栏上对齐 [英] Brand Image too big and not aligned on Bootstrap navbar

问题描述

我的网站上的导航栏的导航栏品牌存在一些问题。我希望它看起来垂直对齐，并且尺寸较小，您能否提出如何实现这一目标。

 < div class =navbar navbar-default navbar-fixed-toprole =navigationstyle =background-color：#FFFFFF> 
< div class =container> 
< div class =navbar-header> 
< button type =buttonclass =navbar-toggledata-toggle =collapsedata-target =。navbar-collapse> 
< span class =sr-only>切换导航< / span> 
< span class =icon-bar>< / span> 
< span class =icon-bar>< / span> 
< span class =icon-bar>< / span> 
< / button> 
< a class =navbar-brandhref =/>< img src =http://www.howlongagogo.com/assets/GOGO.png>< / a> < / DIV> 
< div class =navbar-collapse collapse> 
< ul class =nav navbar-nav> 
< li>< a href =/>主页< / a>< / li> 
< li>< a href =/＃enterdate>输入日期< / a>< / li> 
< li class =hidden-xsstyle =padding-top：15px>< div class =fb-likedata-href =https://www.facebook.com/ howlongagogodata-layout =button_countdata-action =likedata-show-faces =truedata-share =false>< / div>< / li> 
< / ul> 
< / div><！ -  /。nav-collapse  - > 
< / div> 
< div style =width：100％; height：10px; background-color：＃428BCA;>< / div> 
< / div> 
  

为了方便起见，我还创建了一个bootply http://www.bootply.com/XDybrUMhJ2
谢谢

解决方案

替换代码

 < a class =navbar-brandhref =/>< img src =http://www.howlongagogo.com/assets/GOGO.png>< / a> 
  

with

 < a style =background-image：url（& quot; http：//www.howlongagogo.com/assets/GOGO.png& quot;）; width：324px; height：68px; class =navbar-brandhref =/>< / a> 
  

I am having some problems with my navbar-brand for the navbar on my site. I want it to appear vertically aligned and as a smaller size, could you suggest how this could be achieved.

<div class="navbar navbar-default navbar-fixed-top" role="navigation" style="background-color: #FFFFFF">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <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="http://www.howlongagogo.com/assets/GOGO.png"></a></div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li><a href="/">Home</a></li>
        <li><a href="/#enterdate">Enter Date</a></li>
        <li class="hidden-xs" style="padding-top:15px"><div class="fb-like" data-href="https://www.facebook.com/howlongagogo" data-layout="button_count" data-action="like" data-show-faces="true" data-share="false"></div></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
  <div style="width:100%;height:10px;background-color:#428BCA;"></div>
</div> 

I have also created a bootply for convenience http://www.bootply.com/XDybrUMhJ2 Thanks

解决方案

Replace code

<a class="navbar-brand" href="/"><img src="http://www.howlongagogo.com/assets/GOGO.png"></a>

with

<a style="background-image: url(&quot;http://www.howlongagogo.com/assets/GOGO.png&quot;); width: 324px; height: 68px;" class="navbar-brand" href="/"></a>

这篇关于品牌图片太大，并且未在Bootstrap导航栏上对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！