个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 04:49:20 25 4
gpt4 key购买 nike

在我的 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/

25 4 0
文章推荐： C++ 检查 cin 的输入是否有正确的数据
文章推荐： javascript - 将 MediaDevices.enumerateDevices() 的值分配给 JavaScript 中的全局变量
文章推荐： javascript - 检查输入框数组是否为空
文章推荐： html - 选中时如何更改文本字段背景