html - Bootstrap 导航栏 CSS 问题

Question

我已经在 bootstrap 工作了一段时间，并且非常喜欢它的所有功能。但是我在移动 View 上的导航标题上遇到了问题。我有一张图片在网站的桌面版本中显示，我正在尝试在移动显示中更改为较小的图标 Logo 。

我让网站在移动设备上正确显示图标栏并折叠登录屏幕的所有内容。我认为这可能很简单，因为我不完全理解 bootstrap 的 CSS，但谁能告诉我如何在屏幕折叠到移动模式时更改图像。

这是网站在桌面 View 中的样子:

这就是我现在移动时的样子:

这是所需的外观(在 Photoshop 中制作):

当栏移动时，我想交换两个图像。

这是我的 Bootstrap 代码 -

   <div class="navbar navbar-inverse navbar-fixed-top dropShadow" role="navigation">
      <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="images/logoWhite.png" width="400px"></a>
        </div>

        <div class="navbar-collapse collapse">
          <form class="navbar-form navbar-right" role="form">
            <div class="form-group">
              <input type="text" placeholder="Email" class="form-control">
            </div>
            <div class="form-group">
              <input type="password" placeholder="Password" class="form-control">
            </div>
            <button type="submit" class="btn btn-primary">Sign In</button><span style="color:white;"> or</span>
            <button type="submit" class="btn btn-success">Sign Up</button>
          </form>
        </div><!--/.navbar-collapse -->
      </div>
    </div>

Answer 1

您可以为此使用媒体查询。但首先在背景中使用该 Logo 图像。

假设你使用.logo作为标志同学大学

HTML:

<a class="navbar-brand" href="#"><span class="logo"></span></a>

CSS:

@media(max-width:767px){

   .logo{
       background:url(images/hat.png) no-repeat;
       width : 400px;
       display:block;
   }
}

/* this logo will be used for everything outside of the above breakpoint */
.logo{background:url(images/logoWhite.png)