Question

我正在使用Bootstrap构建一个项目组合项目。我想让导航栏响应但不使用默认的汉堡包菜单。相反，我有一个媒体查询，将文本链接更改为图标。但是，当屏幕调整为767及以下时，图标会折叠成第二行。我希望他们能够更接近导航栏标题。

我一整天都在搜索，但其他人似乎都在询问添加汉堡包菜单。

有什么建议吗？

<!-- Fixed navbar -->
<nav id="mobile-nav" class="navbar navbar-default navbar-fixed-top">
  <div class="container nav-mobile">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">K. Anthony</a>
    </div>
    <div>
      <ul class="nav navbar-nav navbar-left">
        <li>
          <a href="#heading"><i class="fa fa-home"></i></a>
        </li>
        <li>
          <a href="#portfolio"><i class="fa fa-file-photo-o"></i></a>
        </li>
        <li>
          <a href="#about-me"><i class="fa fa-book"></i></a>
        </li>
        <li>
          <a href="#contact"><i class="fa fa-envelope"></i></a>
        </li>
      </ul>
    </div><!-- #mobile-nav -->
  </div>
</nav>

Answer 1

如果您希望导航保持不变，只需更改图标即可尝试：

@media only screen and (max-width : 768px) {
   .navbar-header {
       float: left;
    }
   .navbar-nav {
       float: right;
    }
}

这将拉出标题，左边是你的名字，右边是图标。保持它就像你拥有它一样。

Answer 2

 @media only screen and (max-width : 768px) {
   .navbar-header {
       display: inline-block;
       float: left;
    }
}

在媒体查询中试试这可能对您有所帮助。

在没有汉堡菜单的情况下制作响应式Bootstrap导航栏

2 个答案: