css - 制作没有汉堡菜单的响应式 Bootstrap 导航栏

Question

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

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

有什么建议吗？

http://codepen.io/anthkris/pen/xwpPrE/

<!-- 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;
    }
}

这将拉出标题，即您的名字在左侧，图标在右侧。保持它与文字一样。