Question

在Visual Studio 2015中的我的ASP.NET 5 Web应用程序中，默认的_Layout.cshtml视图（也显示在MSDN tutorial here中）使用以下css部分显示主页，关于，联系人链接的顶部导航栏righ上的left和LoginName。如何在导航栏的中心添加一些文本，例如“我的公司名称”。我尝试了<p class="navbar-brand center-block">My Company Name</p>和<p class="navbar-brand style=text-align:center;">My Company Name</p>但是左边仍显示“我的公司名称”：

<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>               
            </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="navbar-brand center-block">My Company Name</p>
                <p class="nav navbar-text navbar-right">Hello, @User.Identity.Name!</p>            </div>
        </div>
    </div>
...
</body>

Answer 1

像这样：

<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
</div>

<a class="navbar-brand" href="#">Company Name</a>

<div class="collapse navbar-collapse" id="navbar-collapse-1">
  <ul class="nav navbar-nav navbar-left">
    <li><a asp-controller="Home" asp-action="Index">App Name</a></li>
    <li><a href="#">Menu</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#">Login</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </li>
  </ul>
</div><!-- /.navbar-collapse -->
</nav>

CSS：

.navbar-brand {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    text-align: center;
    margin: auto;
}

Bootply：http://www.bootply.com/87O7iyygPy

编辑：更新的代码示例和bootply。

Answer 2

更新：

以下是我更新的答案，可让您My Company Name和App Name两个链接：

HTML：

<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="Create" class="navbar-brand brand">
            <div class="brand-inner">My Company Name</div>
          </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>

CSS：

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

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

以下是bootply

Bootstrap顶部导航栏 - 如何在中心添加一个元素

2 个答案: