Angular Material 2导航栏到汉堡菜单

Question

我正在尝试使用 https://material.angular.io 。 Adter Bootstrap 3 我习惯了简单的导航栏，它可以制作一切，您不必在它们背后实现任何逻辑。例如：当屏幕太小而无法显示每个菜单元素时，它们会移动到汉堡菜单...

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

<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.. 所以升级会很痛苦。

感谢您的帮助和cmets！

Answer 1

您好，最好的解决方案是将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>