在Bootstrap 4中将导航项对齐到右侧

258

我刚刚切换到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>

这是它的屏幕截图

在此输入图片描述


2
基于 alpha 6 的最新解决方案 https://dev59.com/_FgR5IYBdhLWcg3wRbk1#41513784 - Carol Skelly
1
根据Bootstrap 4 alpha 6文档,您可以在导航栏中想要向右浮动的<ul>元素上使用ml-auto - rootr
对于具有类名为'navbar-nav'的ul元素,还要添加类名'w-100',并且对于最左边的第一个链接,添加类名'mr-auto'。这样做是为了确保在折叠导航栏的情况下,不需要使用CSS来确保,如果您使用的是Bootstrap或媒体查询,请首先查找它们的类名。 - undefined
8个回答

440

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>
    /* Stackoverflow 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>

正如您所看到的,已经添加了一些额外的样式规则来解决Stackoverflows预览框中的某些奇怪问题。
在您的项目中,您应该可以安全地忽略这些规则。

从v4.0.0开始,似乎这是官方的做法。

编辑:我修改了帖子,包括一个放置在导航栏右侧的下拉菜单,正如@Bruno建议的那样。它需要其leftright属性被反转。我在示例代码的开头添加了额外的CSS片段。
请注意,该示例显示的是移动版本,当您单击“运行代码片段”按钮时。要查看桌面版本,您必须单击“展开片段”按钮。

.ml-auto .dropdown-menu {
    left: auto !important;
    right: 0px;
}

在你的样式表中包含这个应该就可以了。

26
在Bootstrap 4 Alpha 6中,使用ml-auto可以将导航栏项目右对齐。具体解释可参考此处:https://dev59.com/_FgR5IYBdhLWcg3wRbk1 - Carol Skelly
1
请注意,pull-*-*已被弃用,请改用float-*-*。在alpha6中似乎无法使用float-xs-*,因此请使用float-right - andreaem
5
正确答案是在<ul>标签上加上ml-auto类。 - Tamb
我修复了Bootstrap V4 Beta的答案。 - Busti
2
这个ml-auto的解决方案在Bootstrap方面非常不直观,让人感到恶心(顺便说一句:这并不是对答案的打击)。 - FastTrack
显示剩余6条评论

283
在最新版本中,它更加容易。只需在 ul 中添加 ml-auto 类,如下所示:
<ul class="nav navbar-nav ml-auto">

1
这对我有用。我尝试了上面建议的mr-auto,但它没有起作用。添加ml-auto解决了我的问题。 - Scott Kilbourn
17
这应该是被接受的答案。 - kjdion84
2
也对我有用,谢谢。顺便说一句:不确定,但是使用Bootstrap 4时,我认为在ul中不再需要nav类。这也可以工作:<ul class="navbar-nav ml-auto"> - David Dal Busco
1
@kjdion84 由于原帖似乎已经不活跃了,我更新了被接受的答案。 - Busti
这对我也起作用了。谢谢!! - raksheetbhat
显示剩余2条评论

40

这应该可以在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-* 的类都放置,以便导航栏在所有屏幕尺寸下都不会堆叠。 - Mohyaddin Alaoddin
在JSFiddle中使用Bootstrap 4无法正常工作。 - GuardianX

16

导航栏展开

导航栏折叠

我有一个工作中的 Codepen,其中左右对齐的导航链接都使用父标签上的 .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>

14
在Bootstrap 4 alpha-6版本中,由于导航栏使用了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>

这个功能非常好用 :)


适用于Bootstrap 5。 - Alaksandar Jesus Gene

1

使用Bootstrap v4.0.0-alpha.6版本: 两个<ul>元素(.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>

-1
在我的情况下,我正在寻找一种解决方案,允许导航栏中的一个项目右对齐。为了做到这一点,您必须将style="width:100%;"添加到<ul class="navbar-nav">,然后将ml-auto类添加到您的导航栏项目。

-1

这是一个简单的例子。

<!-- 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 而不是样式属性... - Ash

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接