在右侧引导4个导航栏项目
我只是切换到bootstrap 4，并重新加工所有的html和scss来处理它，我似乎无法find如何将一组导航项放在导航栏的右侧。 这是我的导航栏代码：
<nav class="navbar navbar-full navbar-dark bg-primary"> <button class="navbar-toggler hidden-md-up" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button> <%= link_to "Living Recipe", recipes_path(sort_attribut: "popularity", sort_order: :desc), class: "navbar-brand" %> <div class="collapse navbar-toggleable-sm" id="navbarResponsive"> <ul class="nav navbar-nav float-md-left"> <li class="nav-item"> <%= form_tag(recipes_path, :method => "get", id: "search-form", class: "form-inline") do %> <%= text_field_tag :search, params[:search], placeholder: "Search Recipes", class: "form-control col-md-8" %> <% end %> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="http://example.com" id="responsiveNavbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Browse</a> <div class="dropdown-menu" aria-labelledby="responsiveNavbarDropdown"> <%= link_to "Popular", recipes_path(sort_attribute: "popularity", sort_order: :desc), class: "dropdown-item" %> <%= link_to "Newest", recipes_path(sort_attribute: "created_at", sort_order: :desc), class: "dropdown-item" %> <%= link_to "Most Updated", recipes_path(sort_attribute: "most_active", sort_order: :desc), class: "dropdown-item" %> <%= link_to "Most Saved", recipes_path(sort_attribute: "save_count", sort_order: :desc), class: "dropdown-item" %> </div> </li> </ul> <ul class="nav navbar-nav float-md-right"> <% if user_signed_in? %> <li class="dropdown"> <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <%= current_user.displayname.present? ? "D-ring" : current_user.firstname %> </a> <div class="dropdown-menu" aria-labelledby="responsiveNavbarDropdown"> <%= link_to "Profile", user_path(current_user.id), class: "dropdown-item" %> <%= link_to "Recipe Box", user_saved_recipes_path(current_user.id), class: "dropdown-item" %> <%= link_to "Add Recipe", new_recipe_path, class: "dropdown-item" %> <%= link_to "Submitted Recipes", user_path(current_user.id), class: "dropdown-item" %> <%= link_to "Sign Out", destroy_user_session_path, :method => :delete, class: "dropdown-item" %> </div> </li> <% else %> <li class="nav-item"> <%= link_to "Create Account", '', data: {:'toggle' => 'modal', :'target' => '#signupModal'}, class: "nav-link" %> </li> <li class="nav-item"> <%= link_to "Login", '', data: {:'toggle' => 'modal', :'target' => '#loginModal'}, class: "nav-link" %> </li> <% end %> </ul> </div> </nav> 这是它看起来像的截图
为右侧<ul class="navbar-nav ml-auto">创build另一个<ul class="navbar-nav ml-auto"> 。
ml-auto会将你的navbar-nav拉到右边， mr-auto会把它拉到左边。
这适用于Bootstrap V4 Beta
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"/> <style> /* Stackoverflow preview fix, please ignore */ .navbar-nav { flex-direction: row; } .nav-link { padding-right: .5rem !important; padding-left: .5rem !important; } </style> </head> <body> <nav class="navbar navbar-expand-lg navbar-dark bg-primary rounded"> <a class="navbar-brand" href="#">Navbar</a> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link">Left Link 1</a> </li> <li class="nav-item"> <a class="nav-link">Left Link 2</a> </li> </ul> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link">Right Link 1</a> </li> <li class="navbar-item"> <a class="nav-link">Right Link 2</a> </li> </ul> </nav> </body>
在版本4中，它更容易。 只需在ul一个ml-auto类就可以了：
<ul class="nav navbar-nav ml-auto">
这应该适用于alpha 6.关键是左侧导航栏上的“mr-auto”类，它将向右推导右侧导航。 您还需要添加navbar-toggleable-md，否则它将堆叠在一列而不是一行。 注意我没有添加其余的切换项目（例如切换button），我刚刚添加足以让它格式化为请求。 这里有更完整的例子https://v4-alpha.getbootstrap.com/examples/navbars/ 。
<!DOCTYPE html> <html lang="en"> <head> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /> </head> <body> <nav class="navbar navbar-toggleable-md navbar-light bg-faded"> <div class="container"> <a class="navbar-brand" href="#">Navbar</a> <ul class="nav navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> </ul> <ul class="nav navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link on the Right</a> </li> </ul> </div> </nav> </body>
在Bootstrap 4 alpha-6版本中，由于navbar使用的是flex模型，因此可以在父级div中使用justify-content-end并删除mr-auto 。
<div class="collapse navbar-collapse justify-content-end" id="navbarText"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> </div>
这就像一个魅力:)
我有一个左右alignment的导航链接的工作codepen，使用父标签上的.justify-content-between一起折叠成一个响应菜单： https ： .justify-content-between ？编辑器1000
<nav class="navbar navbar-toggleable-sm navbar-inverse bg-inverse"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Acme</a> <div class="collapse navbar-collapse justify-content-between" id="navbar"> <div class="navbar-nav"> <a class="nav-item nav-link" href="#">Ball Bearings</a> <a class="nav-item nav-link" href="#">TNT Boxes</a> </div> <div class="navbar-nav"> <a class="nav-item nav-link" href="#">Logout</a> </div> </div> </nav>
使用Bootstrap v4.0.0-alpha.6：两个<ul> s（ .navbar-na ），一个使用.mr-auto ，一个使用.ml-auto ：
<nav ...> ... <div class="collapse navbar-collapse"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Left Link </a> </li> </ul> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="#">Right Link </a> </li> </ul> </div> </nav>
在我的情况下，我正在寻找一个解决scheme，允许其中一个导航栏项目右alignment。 为了做到这一点，你必须添加style="width:100%;" 到<ul class="navbar-nav"> ， 然后将ml-auto类添加到您的导航栏项目中。
这里和简单的例子。
<!-- Navigation bar--> <nav class="navbar navbar-toggleable-md bg-info navbar-inverse"> <div class="container"> <button class="navbar-toggler" data-toggle="collapse" data-target="#mainMenu"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="mainMenu"> <div class="navbar-nav ml-auto " style="width:100%"> <a class="nav-item nav-link active" href="#">Home</a> <a class="nav-item nav-link" href="#">About</a> <a class="nav-item nav-link" href="#">Training</a> <a class="nav-item nav-link" href="#">Contact</a> </div> </div> </div> </nav>
