Question

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

   <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（max-width：768px）{ .navbar-brand img { ！宽度：100px的重要; } }

Answer 1

你必须在小屏幕上给它更小的宽度，比如

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

Answer 2

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

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

Answer 3

我使用大型徽标并使用以下代码和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是图片

Bootstrap Navbar品牌形象在崩溃时被推倒

3 个答案: