ブートストラップナビゲーションバーには、.NETのコア角度SPAテンプレート

で働いていない私が使用してDOTNETのSPAテンプレートをインストールしました：ブートストラップナビゲーションバーには、.NETのコア角度SPAテンプレート

dotnet new --install Microsoft.AspNetCore.SpaTemplates::*

その後、私は使用して新しい角度アプリケーション作成：パッケージを復元する際

dotnet new angular

をビルド、そして走っていると、私はテンプレートのnavbarで何か変わったことに気づいた。 Picture。通常のトップナビゲーションバーではなく、ページの横にnavbarが設定されていました。私の願望は固定トップのnav-barです。

はapp.component.htmlでは、ナビゲーションバーやルータ出口は、次のようconfigredた：

<div class='container-fluid'> 
    <div class='row'> 
     <div class='col-sm-3'> 
      <nav-menu></nav-menu> 
     </div> 
     <div class='col-sm-9 body-content'> 
      <router-outlet></router-outlet> 
     </div> 
    </div> 
</div>

もちろん、私は問題はNAV-メニューがcol-sm-3内であったとルータ・アウトレットはcol-sm-9内であったということだと思いました。私はNAV-メニューは全幅欄で独自の行にあったように、それを周りに変更、およびルータ出口と同じ：

<div class='container-fluid'> 
    <div class='row'> 
     <div class='col-sm-12'> 
      <nav-menu></nav-menu> 
     </div> 
    </div> 
    <div class="row"> 
     <div class='col-sm-12 body-content'> 
      <router-outlet></router-outlet> 
     </div> 
    </div> 
</div>

しかし、これで問題が解決しませんでした。代わりに、ナビゲーションメニューは画面の横に残り、残りのコンテンツを隠していました。 Picture。

app.component.htmlでHTMLのさまざまな設定を試しましたが、navbarが正常に動作しませんでした。あなたはそれを試してみることにしたいのであれば、この問題を再作成すると、Visual Studioで非常に簡単なはずです、

<div class='main-nav'> 
    <div class='navbar navbar-inverse'> 
     <div class='navbar-header'> 
      <button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'> 
       <span class='sr-only'>Toggle navigation</span> 
       <span class='icon-bar'></span> 
       <span class='icon-bar'></span> 
       <span class='icon-bar'></span> 
      </button> 
      <a class='navbar-brand' [routerLink]="['/home']">Brand</a> 
     </div> 
     <div class='clearfix'></div> 
     <div class='navbar-collapse collapse'> 
      <ul class='nav navbar-nav'> 
       <li [routerLinkActive]="['link-active']"> 
        <a [routerLink]="['/home']"> 
         <span class='glyphicon glyphicon-home'></span> Home 
        </a> 
       </li> 
       <li [routerLinkActive]="['link-active']"> 
        <a [routerLink]="['/counter']"> 
         <span class='glyphicon glyphicon-education'></span> Counter 
        </a> 
       </li> 
      </ul> 
     </div> 
    </div> 
</div>

私は、プロジェクト内の他の何かに触れていない..：ここ

は、ナビゲーションバーのhtmlです

このプロジェクトテンプレートでは、一番上に固定されたナビバーを取得するためのアイデアはありますか？

出典

2017-06-14 JackDeMeyers