CSS:Bootstrap 菜单项右对齐

Question

我添加了一个名为 Registration 的菜单项，并尝试使用 custom.css 使其右对齐。 (由于缺乏声誉，我无法发布它的屏幕截图，因为这是我在这里的第一篇文章)

以下是我目前在custom.css中的内容

li.nav-registration {
    text-align: right;
    float: right;
}

<nav 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-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">Home</a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
        <li><a asp-area="" asp-controller="Music" asp-action="Index">Music</a></li>
        <li><a asp-area="" asp-controller="Home" asp-action="Video">Video</a></li>
        <li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li>
        <li class="nav-registration"><a asp-area="" asp-controller="Home" asp-action="Registration">Registration</a></li>
      </ul>
    </div>
  </div>
</nav>

custom.css 中的样式设置正确。但是，“注册”菜单仍未正确对齐 - 对此提供任何帮助将不胜感激。

Answer 1

据我了解，您必须创建 2 个单独的 navbar 元素。一个用于关于、音乐、视频、联系方式，一个用于注册:

   <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
        <li><a asp-area="" asp-controller="Music" asp-action="Index">Music</a></li>
        <li><a asp-area="" asp-controller="Home" asp-action="Video">Video</a></li>
        <li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li class="nav-registration"><a asp-area="" asp-controller="Home" asp-action="Registration">Registration</a></li>
      </ul>
</div>

您没有说明您使用的是 Bootstrap v3 还是 v4。无论哪种方式，解决方案都与您必须分开 2 个“导航”相同。只是您需要的类会根据 Bootstrap 版本而改变。

Bootstrap 3 示例: https://getbootstrap.com/examples/navbar/

Bootstrap 4 导航栏代码: https://v4-alpha.getbootstrap.com/components/navbar/#supported-content