模仿 Bootstrap 的网页导航栏（使用 Angular）

Question

1。问题

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

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

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

这就是我得到的：

2。守则

此时我没有在Angular 中使用任何花哨的东西，只是简单的对象属性（我也尝试使用header 而不是nav）：

<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">

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