Html 减小最小宽度上的徽标尺寸？

在最后的第三个折叠阶段，它缩小了徽标的宽度

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

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

我该如何解决这个问题

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

CSS（除以下内容外的一般引导）：

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”

添加到图像中：（它现在可以完美地工作了）

使用a更改logo的最大宽度，例如：

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

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

当屏幕宽度小于或等于480px时，“logo”类的最大宽度将设置为200px

我使用“最大宽度”，以防您更改图像，结果图像变小，或者您希望图像容器变小，并使其适合该情况（使用“宽度：100%”），但您可以使用“宽度”，它可能也可以工作

更新

要使navbar品牌进入新行，只需在媒体查询中向其添加

clear:both

（）。例如：

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

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

---

我不明白这是什么意思。请你澄清一下。另外给我们看一些代码会很好。如果你点击网站，你会看到当你缩小它的大小，在最后一次缩小时，徽标的大小缩小了一点。好的，我会给你一个我的意思的url。等你看到它们是不同的行吗？我想你想让它变小一点徽标图像变小？？我确实希望徽标变小，但它与以前在另一行上的徽标不同。我将重新编辑以澄清一点。Hanks，现在尝试一下。嗨，我使用了我认为相同的代码，但它不适用于me@omega_prime请编辑您的问题并添加相关的代码。制作JSFIDLE也将是一项艰巨的任务但这不是强制性的。按要求完成了，先生。嗯，我似乎一点也不清楚。新的一行不是我想要的，我给你普通的引导css代码是没有意义的。当然，除了你的代码之外，我还没有改变任何东西