在我的 Visual Studio 2015 中的 ASP.NET 5 Web 应用程序中，默认的 _Layout.cshtml View (也在 MSDN tutorial here 中显示)使用以下 css 部分作为顶部导航栏，在左侧显示主页、关于、联系链接和右侧的登录名。我怎样才能在导航栏的中心添加一些文本，比如“我的公司名称”。我试过 <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>
最佳答案
像这样:
<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;
}
Bootstrap :http://www.bootply.com/87O7iyygPy
编辑:更新了代码示例和 bootply。
关于html - Bootstrap 顶部导航栏 - 如何在中心添加一个元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36461000/