fix: navbar背景色、字体大小和布局，增加按钮圆角自定义样式

src/app/app.component.html

@@ -1,43 +1,41 @@
-<nav class="navbar navbar-expand-lg navbar-light bg-light">
-  <span class="navbar-text">
+<nav class="navbar navbar-light bg-light">
+  <span class="navbar-text nav-text-lg">
     {{ 'APP_TITLE' | translate }}
   </span>
+  <span>
+    <div class="navbar-collapse" id="navbarSupportedContent">
+      <div class="dropdown">
+        <a class="btn btn-secondary dropdown-toggle nav-text-lg" href="#" role="button" id="dropdownMenuLink"
+          data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+          {{ 'language' | translate }}
+        </a>
 
-
-  <div class="collapse navbar-collapse" id="navbarSupportedContent">
-    <ng-container *ngIf="isLogin">
-      <ul class="navbar-nav mx-auto">
-        <li class="nav-item" routerLinkActive="active">
-          <a class="nav-link" [routerLink]="['/forum']">{{ 'forum.name' | translate }}</a>
-        </li>
-        <li class="nav-item" routerLinkActive="active">
-          <a class="nav-link" [routerLink]="['/visitor']">{{ 'visitor.name' | translate }}</a>
-        </li>
-        <li class="nav-item" routerLinkActive="active">
-          <a class="nav-link" [routerLink]="['/score']">{{ 'score.name' | translate }}</a>
-        </li>
-      </ul>
-    </ng-container>
-
-    <div class="dropdown">
-      <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown"
-         aria-haspopup="true" aria-expanded="false">
-        {{ 'language' | translate }}
-      </a>
-
-      <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
-        <a class="dropdown-item" (click)="translate.use('zh-CN')">{{ 'chinese' | translate }}</a>
-        <a class="dropdown-item" (click)="translate.use('en-US')">{{ 'english' | translate }}</a>
+        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
+          <a class="dropdown-item nav-text-lg" (click)="translate.use('zh-CN')">{{ 'chinese' | translate }}</a>
+          <a class="dropdown-item nav-text-lg" (click)="translate.use('en-US')">{{ 'english' | translate }}</a>
+        </div>
       </div>
     </div>
-  </div>
+  </span>
 </nav>
 
-<nav class="navbar navbar-light bg-light justify-content-end">
-  <span class="navbar-text mr-3" [innerHTML]="'tip.HELLO'|translate:{value:managerName}|html" *ngIf="isLogin">
-
-  </span>
-  <button class="btn btn-info" (click)="logout()" *ngIf="isLogin">{{'button.logout'|translate}}</button>
+<nav class="navbar navbar-expand-lg navbar-light bg-light justify-content-center pb-0">
+  <ng-container *ngIf="isLogin">
+    <ul class="navbar-nav">
+      <li class="nav-item mr-2" routerLinkActive="active">
+        <button type="button" class="btn btn-primary" [routerLink]="['/forum']">{{ 'forum.name' | translate }}</button>
+      </li>
+      <li class="nav-item mr-2" routerLinkActive="active">
+        <button type="button" class="btn btn-primary"
+          [routerLink]="['/visitor']">{{ 'visitor.name' | translate }}</button>
+      </li>
+      <li class="nav-item mr-2" routerLinkActive="active">
+        <button type="button" class="btn btn-primary" [routerLink]="['/score']">{{ 'score.name' | translate }}</button>
+      </li>
+      <li class="nav-item" routerLinkActive="active">
+        <button class="btn btn-primary" (click)="logout()" *ngIf="isLogin">{{'button.logout'|translate}}</button>
+    </ul>
+  </ng-container>
 </nav>
 
-<router-outlet></router-outlet>
+<router-outlet></router-outlet>

src/styles.scss

@@ -1,2 +1,17 @@
 /* You can add global styles to this file, and also import other style files */
 @import '../node_modules/bootstrap/scss/bootstrap';
+
+// 自定义 navBar 背景色
+.bg-light {
+    background-color: rgb(141, 198, 248) !important;
+}
+
+// navBar 第一栏字体放大 
+.nav-text-lg {
+    font-size: 1.5rem;
+}
+
+// 按钮圆角
+.btn-border {
+    border-radius: 1rem;
+}