Question

以下是_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，其样式与使用类navbar-brand的App Name相同。

现在我将公司的名字带到中心，我添加了课程brand。

但现在问题是当我将鼠标悬停在 App Name 或导航栏的任何部分上时（About，Contact和Home除外链接）然后我的公司名称是活动链接。

如何将我公司的名称和应用名称都设置为具有活动链接的样式的活动链接？

感谢任何帮助。

Answer 1

这是因为尺寸是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>

一个Navbar上的2个Navbar-Brands

1 个答案: