在最小宽度上减小徽标的大小？

Question

在theme based website 的最后第三阶段折叠时，它会减小徽标的宽度。

然而，他们已经从他们的 css 中删除了所有的空格，这使得它非常难以阅读。

对我来说问题是，当徽标折叠到最小宽度并且徽标和导航栏没有坐在一起时，徽标有点太大（宽度）。

我该如何解决这个问题？

Reduce width on this page to see what I mean

更新：使用@joshhunt 代码，它现在将导航栏和徽标压在一起

CSS（香草引导程序除外）：

@media (max-width: 480px) {
    .navbar-brand {
        max-width: 200px;
        height: auto; /* So the image doesn't distort */
    }
}

HTML 页面：

<div class="navbar navbar-default">
<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="index.htm"><img src="logo.png" alt="SelectUKDeals"></a>
  </div>
  <div class="navbar-collapse collapse navbar-responsive-collapse">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Active</a></li>
      <li><a href="#">Link</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li class="dropdown-header">Dropdown header</li>
          <li><a href="#">Separated link</a></li>
          <li><a href="#">One more separated link</a></li>
        </ul>
      </li>
    </ul>
    <form class="navbar-form navbar-left">
      <input class="form-control col-lg-8" placeholder="Search" type="text">
    </form>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#">Link</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>

更新 #2：原来是这样的——

到这里

解决方案：我没有在图片中添加class="logo" :( 现在可以正常使用了

Answer 1

使用media query 更改徽标上的最大宽度，例如：

@media (max-width: 480px) {
    .logo {
        max-width: 200px;
        height: auto; /* So the image doesn't distort */
    }
}

当屏幕宽度小于或等于 480 像素时，这将在“徽标”类上设置 200 像素的最大宽度。

我使用 max-width 以防万一您更改图像并最终变小，或者图像容器最终变小并且您希望它适合它（使用宽度：100%；）但您可以使用宽度，它可能也可以工作。

更新

要让 navbar-brand 换行，您只需在媒体查询中添加 clear: both (more info on clear) 即可。例如：

@media (max-width: 480px) {
    .navbar-brand {
        clear: both;
    }
}