2016-04-11 169 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的App Name相同。

現在爲了讓我的公司名稱到中心,我添加了類brand

但現在的問題是,當我將鼠標懸停在程序名稱或導航欄的任何部分(除AboutContactHome鏈接),然後我的公司名稱是主用鏈路。

如何使我的公司名稱和應用程序名稱都與它們當前具有活動鏈接的樣式一起處於活動鏈接?

任何幫助表示讚賞。

回答

2

這是因爲大小爲100%,你總是過它,所以它強調...

Bootplyhttp://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

明白了。這樣可行。謝謝! –