Question

我正在尝试减小顶部栏菜单的大小。但是我发现的唯一选择是 line-height 。我只是设置了 top bar 类的高度，但是它不起作用。如何缩小页眉的高度？

HTML代码

<div class="col-sm-6">
  <div class="header-right-bar text-right">
    <ul class="contact-wrapper">
      <li class="acces">
        <ul>
          <li><i class="fa fa-envelope" aria-hidden="true"></i></li>
          <li>
            <a href="#"></a><a href="#">info@starconsortiumbd.com</a></li>

        </ul>
      </li>
      <li>
        <ul class="social-icon">
          <li><a href="https://www.facebook.com/starconsortiumbd/" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
          <li><a href="https://twitter.com/" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
          <li><a href="https://linkedin.com" target="_blank"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
          <li><a href="http://gmail.com/" target="_blank"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li>
          <li><a href="https://www.instagram.com/" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
        </ul>
      </li>
    </ul>
  </div>
  <!-- header-right-bar -->
</div>
</div>
<!-- top-bar -->
</div>
</div>
<!-- top-bar -->

Answer 1

如果您有导航栏，请尝试将其添加到css文件中：

.navbar-nav > li > a {
  padding-top:5px !important; padding-bottom:5px !important;
}
.navbar {
  min-height:32px !important
}

否则，只需使用您的班级名称更改“导航栏”即可。

.yourclass-yourclass > li > a {
  padding-top:5px !important; padding-bottom:5px !important;
}
.yourclass {
  min-height:32px !important
}

如果上面的代码不起作用，请尝试以下操作：

.navbar {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: smaller;
  line-height: 1em;
}

如何降低顶部菜单栏的高度

1 个答案: