模仿Bootstrap网页的Navbar（带有Angular）

Question

1。问题

我正在尝试模仿Bootstrap's Webpage's Navbar，但是尽管周围都有相同的课程，但我没有成功。我还使用了Angular，这让我想知道这是否与TypeScript框架中的某个东西有关，而不是与Bootstrap本身有关，例如下拉按钮就是这种情况。

主要问题是，当屏幕宽度减小时，带有菜单项和社交图标的ul不会形成不同的行。

例如，这就是我对网站的期望：

这就是我得到的：

2。代码

目前，我在Angular中没有使用任何花哨的东西，只是普通对象的属性（我也用header而不是nav进行了尝试）：< / p>

<nav class="navbar navbar-expand navbar-light bg-light">
  <a 
    class="navbar-brand mr-0 mr-md-2"
    routerLink="/">
      Logo
  </a>
  <div class="navbar-nav-scroll">
    <ul class="navbar-nav bd-navbar-nav flex-row">
      <li 
        class="nav-item" 
        *ngFor="let itemNavbar of itemsNavbar">
          <a 
            [routerLink]="itemNavbar['page']"
            [routerLinkActiveOptions]="{exact: true}"
            routerLinkActive="active" 
            class="nav-link">
              {{ itemNavbar[langNavbar] }}
          </a>
      </li>
    </ul>
  </div>
  <ul class="navbar-nav ml-auto">
    <li 
      class="nav-item"
      *ngFor="let socialIcon of socialIcons">
        <a
          class="nav-link"
          href="{{ socialIcon.link }}">
            <i [ngClass]="socialIcon.icon"></i>
        </a>
    </li>
  </ul>
</nav>

Answer 1

男孩，我为此感到愚蠢...

经过很多时间修改子元素后，错误始终是头号问题。我不小心从另一个页面的顶部复制粘贴了<nav>元素，因此，它缺少flex-column和flex-md-row类：

<nav class="navbar navbar-expand navbar-light flex-column flex-md-row bg-light">

无论如何，非常感谢那些尝试提供帮助的人。