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

感谢您的帮助和评论！

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>

Angular material 2 个导航栏到汉堡菜单

Angular material 2 navbar to hamburger menu

html

css

material-design

angular-material2