这是 _Layout
页面的一部分:
<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
类的应用程序名称相同。
现在,为了将我公司的名称添加到中心,我添加了brand
类。
但现在的问题是,当我将鼠标悬停在应用程序名称或导航栏的任何部分(关于
、联系方式
除外)时,和Home
链接),那么我的公司名称 就是事件链接。
如何使“我的公司名称”和“应用程序名称”都是事件链接,并采用它们当前具有事件链接的样式?
感谢任何帮助。
最佳答案
因为尺寸是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>
关于html - 2 个导航栏 - 一个导航栏上有品牌,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36557461/