在bootstrap-4中将导航项与右侧对齐[重复]
Posted
技术标签:
【中文标题】在bootstrap-4中将导航项与右侧对齐[重复]【英文标题】：Align nav-items to right side in bootstrap-4 [duplicate] 【发布时间】：2017-03-03 20:49:36 【问题描述】：我刚刚切换到 bootstrap 4 并重新编写了所有 html 和 scss 以使用它，但我似乎无法找到如何将一组导航项放在导航栏的右侧。这是我的导航栏代码：
<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>
这是它的截图
【问题讨论】：
基于alpha 6的最新解决方案***.com/a/41513784/171456 根据bootstrap 4 alpha 6 documentation，你可以使用ml-auto对你想要在导航栏中浮动的<ul>元素。
【参考方案1】：
TL;DR：
在右侧为您想要的导航栏项目创建另一个 <ul class="navbar-nav ml-auto">。ml-auto 会将您的 navbar-nav 拉到右侧，mr-auto 会将其拉到左侧。
针对 Bootstrap v4.5.2 测试
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"/>
<style>
/* *** preview fix, please ignore */
.navbar-nav
flex-direction: row;
.nav-link
padding-right: .5rem !important;
padding-left: .5rem !important;
/* Fixes dropdown menus placed on the right side */
.ml-auto .dropdown-menu
left: auto !important;
right: 0px;
</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="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown on Right</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action with a lot of text inside of an item</a>
</div>
</li>
</ul>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
</body>
</html>如您所见，添加了额外的样式规则以解决 ***s 预览框中的一些奇怪问题。 您应该能够安全地忽略项目中的这些规则。
从 v4.0.0 开始，这似乎是官方的做法。
编辑：我修改了帖子，在导航栏右侧添加了一个下拉菜单，正如@Bruno 所建议的那样。它需要反转其left 和right 属性。我在示例代码的开头添加了一个额外的 css sn-p。
请注意，当您单击Run code snippet 按钮时，示例显示的是移动版本。要查看桌面版本，您必须单击Expand snippet 按钮。
.ml-auto .dropdown-menu
left: auto !important;
right: 0px;
在您的样式表中包含它应该可以解决问题。
【讨论】：
对 Alpha 6 使用ml-auto，如下所述：***.com/questions/41513463/…
请注意pull-*-* 已弃用，请改用float-*-*。 float-xs-* 似乎在 alpha6 中不起作用，所以请使用 float-right
对于 alpha 6 检查这个jsbin.com/kemawa/edit?output
正确答案是将ml-auto类添加到<ul>
这个解决方案ml-auto 对 Bootstrap 来说是如此不直观，令人作呕。 （仅供参考：这不是答案）【参考方案2】：
这应该适用于 alpha 6。关键是左侧导航上的“mr-auto”类，它将右侧导航推到右侧。您还需要添加 navbar-toggleable-md 否则它将堆叠在一列而不是一行。注意我没有添加剩余的切换项（例如切换按钮），我添加的内容刚好足以让它按要求格式化。这里有更完整的例子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 远非稳定，并且规则和命名约定不断变化，这会减慢任何开发.感谢您帮助我们度过这个困境，直到我们获得稳定版本。 更新你应该把navbar-toggleable-*的所有类都放进去，这样导航就不会在所有屏幕尺寸上叠加。
无法在 JSFiddle 中使用 Bootstrap 4。【参考方案3】：
在上一个版本中，它更容易。只需在 ul 中添加一个 ml-auto 类，如下所示：
<ul class="nav navbar-nav ml-auto">
【讨论】：
这对我有用。我按照上面的建议尝试了 mr-auto，但它没有用。添加 ml-auto 为我修复了它。 这应该是公认的答案。 也为我工作，谢谢。旁注：不确定，但对于 Bootstrap 4，我认为ul 不再需要 nav 类。这也可以：<ul class="navbar-nav ml-auto">
@kjdion84 由于 op 似乎处于非活动状态，我更新了接受的答案。
这个解决方案在 Bootstrap 方面非常不直观，令人作呕。 （仅供参考：这不是答案）【参考方案4】：
使用 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>
【讨论】：
【参考方案5】：在 Bootstrap 4 alpha-6 版本中，由于 navbar 使用 flex 模型，您可以在 parent 的 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>
这就像一个魅力:)
【讨论】：
适用于 bootstrap 5【参考方案6】：就我而言，我一直在寻找一种解决方案，它允许 一个 导航栏项目右对齐。为此，您必须将style="width:100%;" 添加到<ul class="navbar-nav"> 并然后将ml-auto 类添加到您的导航栏项目。
【讨论】：
【参考方案7】：我有一个带有左右对齐导航链接的工作代码笔，它们都使用父标签上的.justify-content-between 一起折叠成响应式菜单：https://codepen.io/epan/pen/bREVVW?editors=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>
【讨论】：
【参考方案8】：这里和简单的例子。
<!-- 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>
【讨论】：
这并不能解释任何事情，如果您的style="1width: 100%" 根本无法工作，代码不会轻易显示预期的内容和最糟糕的部分，您也应该使用 w-100 类而不是样式属性...以上是关于在bootstrap-4中将导航项与右侧对齐[重复]的主要内容，如果未能解决你的问题，请参考以下文章
Bootstrap 4 Navbar：右对齐下拉菜单在右侧打开：溢出[重复]