0
私は、ブートストラップを使用するangular2ウェブサイトを持っていて、それは2ヶ月間完璧に正常に動作しました。今日、ブートストラップの機能の多くは消えてしまった。以下は画像です - 上の白いストライプは、navbarのタイトルはまだありますが、navbarのタイトルはまだありますが、loginやregisterなどの色やその他の項目は表示されません。それは前に見てみましょうそれブートストラップnavbarとパネルはウェブサイトから消えました
...私は4betaに、ブートストラップ3.3.7を変更しようとしたが、結果は同じです:
index.htmlを:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Image Annotation</title>
<base href="/">
<link rel="stylesheet" href="https://bootswatch.com/flatly/bootstrap.css">
<!--link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"-->
<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://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<app-root></app-root>
<!--script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script-->
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
navbar.component.html:私は、標準のブートストラップとに切り替え
<link rel="stylesheet" href="https://bootswatch.com/flatly/bootstrap.css">
:私はビジネスに戻ってきた
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" routerLink="/">Imaging Annotation and Management</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li *ngIf="authService.loggedIn()" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"><a routerLink="/dashboard">Dashboard</a></li>
<li><a *ngIf="authService.loggedIn()" routerLink="/profile" >Profile</a></li>
<li><a *ngIf="authService.loggedIn()" routerLink="/anno" >Annotation</a></li>
<li><a *ngIf="!authService.loggedIn()" routerLink="/login" >Login</a></li>
<li><a *ngIf="authService.loggedIn()" href="#" (click)="onLogoutClick()">Logout</a></li>
<li *ngIf="!authService.loggedIn()" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"><a routerLink="/register" >Register</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
共有コードまたはあなたのウェブサイトのリンクにナビバーの問題があります。 – Super
上記を参照してください – user1298416
navbarコンポーネントでは、navbarアイテムが表示されます。コードスニペットを実行し、参照してください。ウェブサイトに問題がある場合は、ウェブサイトで問題を見つける必要があります。現在、コードスニペットが機能しています。 – Super