2016-04-11 16 views
2

ここでは_Layoutページのセクションである:ここで2つナビゲーションバー上のナビゲーションバー-ブランド

<body> 
<div class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container"> 
     <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 asp-controller="Home" asp-action="Index" class="navbar-brand">App Name</a> 
      <a asp-controller="Home" asp-action="Index" class="navbar-brand brand">My Company Name</a> 
     </div> 
     <div class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
       <li><a asp-controller="Home" asp-action="Index">Home</a></li> 
       <li><a asp-controller="Home" asp-action="About">About</a></li> 
       <li><a asp-controller="Home" asp-action="Contact">Contact</a></li> 
      </ul> 

      <p class="nav navbar-text navbar-right">Hello, @User.Identity.Name!</p>   </div> 
    </div> 
</div> 

は、問題を実証するbootplyです。

私の会社の名前をクラスnavbar-brandを使用している私のアプリケーション名と同じスタイルでNavbarに追加したいと思います。

私の会社の名前を中心に取得するには、クラスbrandを追加しました。

しかし、私は アプリケーション名または( AboutContact、および Homeリンクを除く)ナビゲーションバーの任意の部分にカーソルを合わせると、今の問題はあるが、その後 マイ会社名はアクティブリンクです。

私の会社名とアプリケーション名の両方をアクティブリンクと現在アクティブリンクの両方のスタイルにするにはどうすればよいですか?

何か助けていただければ幸いです。

答えて

2

サイズが100%であるので、それは

...それがハイライトされていますので、あなたは、その上に常にしている、Bootplyです:http://www.bootply.com/l116cll2on

CSS

.brand { 
    position: absolute; 
    left: 50%; 
    top: 0; 
    text-align: center; 
    margin: auto; 

} 
.brand-inner{ 
    left: -50%; 
    position: relative; 
} 

HTML

  <a asp-controller="Home" asp-action="Index" class="navbar-brand">App Name</a> 
      <a asp-controller="Home" asp-action="Create" class="navbar-brand brand"> 
      <div class="brand-inner"> My Company Name</div> 
      </a> 
+0

というものがあります。それは動作します。ありがとう! –

関連する問題