html - 2 个导航栏 - 一个导航栏上有品牌

标签 html twitter-bootstrap css twitter-bootstrap-3

这是 _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/

相关文章:

html - Outlook 中的比例 html 图像

jquery - css li 填充本身

css - Bootstrap 3 : Responsive navbar opens off-canvas on the left instead of default behaviour

html - 图像不应在元素中使用全 Angular

html - 网站设计有很多图像并且正在增加加载时间

css - Vue 2 + 网页包 : Accessing Assets Folder

html - 中心固定宽度元素,div 填充额外空间

javascript - 单击任意输入框后下拉菜单关闭

css - 扩展 div

javascript - ThreeJS 更新相机位置,使平面世界位置与 DIV 屏幕位置匹配