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元素。 一种是About, Music, Video, Contact ，另一种是Registration ：

  <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 3示例： https ： //getbootstrap.com/examples/navbar/

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