Bootstrap Navbar 品牌形象在折叠时被下推答案

【问题标题】：Bootstrap Navbar Brand image gets pushed down upon collapseBootstrap Navbar 品牌形象在折叠时被下推
【发布时间】：2016-06-08 12:43:41
【问题描述】：

当我调整屏幕大小以模拟移动设备时，我的导航栏品牌形象被下推。如何使用媒体查询来调整导航栏标题的大小（因为我认为它不会调整大小并迫使品牌形象下降）？

   <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"style="margin-top:27px;">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" style="">
           <%=image_tag "elem_logo-white.png", :style => "width: 95%;"%> 
          </a>
   </div>

我做了这行代码，但是没有用。图像变小了，但导航栏仍然支离破碎。 @media（最大宽度：768px）{ .navbar 品牌 img{ 宽度：100px！重要； } }

【问题讨论】：

标签： html css ruby-on-rails twitter-bootstrap

【解决方案1】：

你必须在像

这样的小屏幕上给它更小的宽度

@media (max-width:768px){
 .navbar-brand img{
   width:100px;
   max-height:50px;
 }
}

【讨论】：

我试过了，但是没有用:(我上传了结果。
引导导航栏的高度为 50px；试试这样的 .navbar-brand img{ max-height:50px;如果没有，它应该可以工作，请发布一个有效的 html 代码，以便我们为您调试它

【解决方案2】：

我使用大徽标并使用以下代码和 css 为我的：

style.css

.logo-img {
  max-width: 200px;
  margin-top: -10px;
}

header.html

<nav class="navbar navbar-fixed-top" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <button class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse" type="button">
        <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 class="logo-img" src="PATH_TO_YOUR_IMAGE"></a>
    </div>
  </div>
</nav>

PATH_TO_YOUR_IMAGE 是图片的位置

【讨论】：

【解决方案3】：

我通过编辑 Peter Wilson 的建议解决了这个问题。这是有效的：

    @media (max-width:768px){
        .navbar-brand{
       width:70vw!important;
      }
    }

【讨论】：