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

Question

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

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

有什么建议吗？

<!-- 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 {
       display: inline-block;
       float: left;
    }
}

在媒体查询中试试这个，这可能对你有帮助。

Answer 2

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

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

这会将 header 拉到左边，图标拉到右边。保持原样，就好像你拥有它一样。

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

Make responsive Bootstrap navbar without hamburger menu

css

navbar

twitter-bootstrap