Question

在theme based website上，在崩溃的最后第三阶段，它会缩小徽标的宽度。

然而，他们已经从他们的CSS中删除了所有空格，因此非常难以阅读。

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

我该如何解决这个问题？

Reduce width on this page to see what I mean

更新：使用@joshhunt代码，它现在可以压缩导航栏和徽标

CSS（vanilla bootstrap除外）：

@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 ：所以它就像这样 -

before

到这个

after

解决方案：我没有将class="logo"添加到图片中:(现在效果很好

Answer 1

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

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

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

我使用max-width只是为了你改变图像并且它最终变小或你的图像容器最终变小并且你希望它适合那个（使用宽度：100％;）你可以只是使用宽度，它可能也会起作用。

<强>更新

要让navbar-brand继续使用新行，您只需在媒体查询中添加clear: both（more info on clear）即可。例如：

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

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

1 个答案: