Question

我的导航栏上的navbar-brand存在一些问题。我希望它显示为垂直对齐，并且尺寸较小，您能否建议如何实现这一目标。

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

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

Answer 1

您可以约束图像的大小，并使用行高来居中。另见SO Post。

.navbar.navbar-wrap3 .navbar-brand {
  padding: 0;
  margin: 0;
}
.navbar.navbar-wrap3 .navbar-brand img {
  height: 75px;
  width: 300px;
  padding: 0;
  margin: 0;
  left: 0;
}
.navbar.navbar-wrap3 {
  background: #77B69C;
  border-bottom: 10px solid #428BCA;
}
.navbar.navbar-wrap3 .navbar-header {
  height: 75px;
}
.navbar.navbar-wrap3 .navbar-toggle {
  margin-top: 20px;
}
@media (min-width: 768px) {
  .navbar.navbar-wrap3 .navbar-nav > li > a {
    line-height: 45px;
  }
}
@media (max-width: 360px) {
  .navbar.navbar-wrap3 .navbar-brand img {
    height: auto;
    width: 210px;
    padding: 0;
    margin: 4px 0;
    left: 0;
  }
  .navbar.navbar-wrap3 .navbar-nav > li > a {
    line-height: 20px;
  }
  .navbar.navbar-wrap3 .navbar-toggle {
    margin-top: 8px;
  }
  .navbar.navbar-wrap3 .navbar-header {
    height: auto;
  }
  body {
    background: red;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-default navbar-fixed-top navbar-wrap3" 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>

Answer 2

替换代码

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

与

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

品牌形象太大而且在Bootstrap导航栏上没有对齐

2 个答案: