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

f8rj6qna 于 8个月前发布在 Bootstrap

关注(0)|答案(4)|浏览(61)

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

<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{ width：100px！重要; } }

twitter-bootstrap

来源：https://stackoverflow.com/questions/35632434/bootstrap-navbar-brand-image-gets-pushed-down-upon-collapse

4条答案

按热度按时间

sqxo8psd1#

你必须给予它更小的宽度在小屏幕上像

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

赞(0）回复(0）举报 8个月前

oxf4rvwz2#

我通过编辑彼得·威尔逊的建议解决了这个问题。以下是有效的方法：

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

赞(0）回复(0）举报 8个月前

wj8zmpe13#

我使用一个大的标志，并使用以下代码和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是图片

赞(0）回复(0）举报 8个月前

wlsrxk514#

显然，上面没有工作，直到我把margin-bottom或padding-bottom，这推动了约束图像在底部以上的导航栏底部和对齐没有突出外。

@media(max-width: 768px){
    .navbar-brand img{
      width: 100px;
      max-height: 60px;
      /*padding-bottom: 20px;*/
      padding-bottom: 20px;
    }
  }

赞(0）回复(0）举报 8个月前

我来回答

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

4条答案

相关问题

热门标签

最新问答