2017-11-03 15 views
0

私は、ブートストラップを使用するangular2ウェブサイトを持っていて、それは2ヶ月間完璧に正常に動作しました。今日、ブートストラップの機能の多くは消えてしまった。以下は画像です - 上の白いストライプは、navbarのタイトルはまだありますが、navbarのタイトルはまだありますが、loginやregisterなどの色やその他の項目は表示されません。それは前に見てみましょうそれブートストラップnavbarとパネルはウェブサイトから消えました

enter image description here

...私は4betaに、ブートストラップ3.3.7を変更しようとしたが、結果は同じです:

enter image description here

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>

+0

共有コードまたはあなたのウェブサイトのリンクにナビバーの問題があります。 – Super

+0

上記を参照してください – user1298416

+0

navbarコンポーネントでは、navbarアイテムが表示されます。コードスニペットを実行し、参照してください。ウェブサイトに問題がある場合は、ウェブサイトで問題を見つける必要があります。現在、コードスニペットが機能しています。 – Super

答えて

0

))問題は、このコードでいました今すぐ動作します:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">