Question

我正在尝试使用https://material.angular.io。 Adter Bootstrap 3我习惯使用simle导航栏，它可以制作所有内容，而且你不需要在它们后面实现任何逻辑。例如：当屏幕太小而无法显示每个菜单元素时，它们会移动到汉堡菜单...

我正在努力制作这样的东西，我目前最好的代码：

<md-toolbar color="primary">
    <nav md-tab-nav-bar>
        <a md-tab-link>
           This
        </a>
        <a md-tab-link>
            Looks
         </a>
         <a md-tab-link>
            really bad
         </a>
      </nav>
  </md-toolbar>

我需要看起来像这个导航栏： https://mdbootstrap.com/components/navbar/

我知道我离这个很远，但仍然试图实现它。

不幸的是我不能使用mdbootstrap，因为对于几乎所有好看的东西它都需要Bootstrap 4，而我在整个项目中使用bootstrap 3.所以升级会非常痛苦。

感谢您的帮助和评论！

Answer 1

您好{I}将md-tab-nav-bar移出md-tab-nav-bar的最佳解决方案。所以你的例子看起来像：

<md-toolbar color="primary">
  some title
</md-toolbar>
<nav md-tab-nav-bar backgroundColor="primary">
  <a md-tab-link>
    This
  </a>
  <a md-tab-link>
    Looks
  </a>
  <a md-tab-link>
    really bad
  </a>
</nav>

Angular material 2 navbar to hamburger menu

1 个答案: