Question

我有太宽/重新缩放页面导航栏的问题。这是代码：

navbar.component.html：

<nav id="mainNavbar" class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse"
          data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
          aria-expanded="false" aria-label="Toggle navigation"
          (click)="toggleCollapsed()">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div id="navbarSupportedContent" [ngClass]="{'collapse': collapsed, 'navbar-collapse': true}">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </div>
</nav>

navbar.component.ts：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-navbar',
  templateUrl: 'navbar.component.html',
  styleUrls: ['navbar.component.html']
})
export class NavbarComponent implements OnInit {
constructor(){}

ngOnInit(){
}
}

app.component.html：

<body>
<app-navbar></app-navbar>
<router-outlet></router-outlet>
  <div class="container">

  </div>

</body>

app.component.css :(添加以保留导航栏和其余页面之间的空间）：

body {
  padding-top: 60px;
}
@media (max-width: 979px) {
  body {
    padding-top: 0px;
  }
}

所有导入都已完成，因为我通过angular cli添加了组件，所以app.module.ts：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import{RouterModule, Routes}   from '@angular/router';
import{HttpModule}   from '@angular/http';
import{FormsModule}   from '@angular/forms';
import { AppComponent } from './app.component';
import { ListuserComponent } from './components/listuser/listuser.component';
import { UserFormComponent } from './components/user-form/user-form.component';
import{UserService}   from './shared-service/user.service';
import { NavbarComponent } from './components/navbar/navbar.component';
const appRoutes:Routes=[
{path:'', component:ListuserComponent},
{path:'op', component:UserFormComponent}
];

@NgModule({
  declarations: [
    AppComponent,
    ListuserComponent,
    UserFormComponent,
    NavbarComponent
  ],
  imports: [
    BrowserModule,
    HttpModule,
    FormsModule,
    RouterModule.forRoot(appRoutes)
  ],
  providers: [UserService],
  bootstrap: [AppComponent]
})
export class AppModule { }

的index.html：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>RestClient</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

</head>
<body>
  <app-root></app-root>
  <script
    src="https://code.jquery.com/jquery-3.3.1.js"
    integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
    crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>

最后，我得到了这个： Navbar是不自然的宽，并重新缩放整个页面。我多次尝试ng serve --open。

Bootstrap导航栏使用angular4行为奇怪

0 个答案: