首页 文章

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

提问于
浏览 次
1

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

我一直在寻找，但其他人似乎都在询问添加汉堡菜单 .

有什么建议？

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>
css twitter-bootstrap navbar

2 回答

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

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

    回复于
  • 0

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

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

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

    回复于

相关问题