本文介绍了品牌图片太大,并且未在Bootstrap导航栏上对齐的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

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

解决方案

替换代码

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

解决方案

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导航栏上对齐的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

10-27 10:32