Bootstrap 4导航栏项目在右侧

Bootstrap 4 navbar items on right side

本问题已经有最佳答案，请猛点这里访问。

我刚刚切换到引导程序4，并重新处理了所有的html和scss以使其使用，但我似乎找不到如何在导航栏的右侧放置一组导航项的方法。这是我的导航栏代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

<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" %>

<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">
Browse

<%= 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" %>

</li>

</ul>

<ul class="nav navbar-nav float-md-right">
<% if user_signed_in? %>
<li class="dropdown">

<%= current_user.displayname.present? ?"D-ring" : current_user.firstname %>

<%= 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" %>

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

</nav>

这是它的截图

enter image description here

相关讨论

TL; DR：

为您想要在右侧的导航栏项目创建另一个

ml-auto

navbar-nav

mr-auto

经过Bootstrap v4.5.2测试

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

<!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">
Navbar
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
Left Link 1

</li>

<li class="nav-item">
Left Link 2

</li>

</ul>

<ul class="navbar-nav ml-auto">
<li class="nav-item">
Right Link 1

</li>

<li class="nav-item dropdown">
Dropdown on Right

Action
Another action with a lot of text inside of an item

</li>

</ul>

</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js">
</body>
</html>

如您所见，在Stackoverflows预览框中添加了其他样式规则，以解决一些奇怪的问题。
您应该能够安全地忽略项目中的那些规则。

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

编辑：我修改了帖子，以包含一个下拉列表，该下拉列表位于@Bruno建议的导航栏的右侧。它需要反转其left和right属性。我在示例代码的开头添加了一个额外的CSS代码。
请注意，该示例显示了单击Run code snippet按钮时的移动版本。要查看桌面版本，必须单击Expand snippet按钮。

1
2
3
4

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

将其包含在样式表中应该可以解决问题。

相关讨论

在最新版本中，它更容易。只需将ml-auto类放在ul中，如下所示：

1	<ul class="nav navbar-nav ml-auto">

相关讨论

这应该适用于alpha6。关键是左侧导航栏中的" mr-auto"类，它将右侧的导航推到右侧。您还需要添加navbar-toggleable-md，否则它将堆叠在列而不是行中。请注意，我没有添加其余的切换项(例如切换按钮)，只是添加了足够的内容以使其按要求进行格式化。这是更完整的示例https://v4-alpha.getbootstrap.com/examples/navbars/。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

<!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">

Navbar
<ul class="nav navbar-nav mr-auto">
<li class="nav-item active">
Home

</li>

<li class="nav-item">
Link

</li>

<li class="nav-item">
Link

</li>

</ul>

<ul class="nav navbar-nav">
<li class="nav-item">
Link on the Right

</li>

</ul>

</nav>
</body>

相关讨论

我有一个正常工作的Codepen，它具有左对齐和右对齐的nav链接，这些链接都使用父标记上的.justify-content-between一起折叠到了响应式菜单中：https://codepen.io/epan/pen/bREVVW?editors=1000

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<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>
Acme

Ball Bearings
TNT Boxes

Logout

</nav>

在Bootstrap 4 alpha-6版本中，由于导航栏正在使用flex模型，因此您可以在父级的div中使用justify-content-end并删除mr-auto。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<ul class="navbar-nav">
<li class="nav-item active">
Home <span class="sr-only">(current)</span>

</li>

<li class="nav-item">
Link

</li>

<li class="nav-item">
Disabled

</li>

</ul>

这就像一个魅力:)

对于Bootstrap v4.0.0-alpha.6：两个

.navbar-na

.mr-auto

.ml-auto

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<nav ...>
...

<ul class="navbar-nav mr-auto">
<li class="nav-item active">
Home <span class="sr-only">(current)</span>

</li>

<li class="nav-item">
Left Link

</li>

</ul>

<ul class="navbar-nav ml-auto">
<li class="nav-item">
Right Link

</li>

</ul>

</nav>

这里和简单的例子。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<nav class="navbar navbar-toggleable-md bg-info navbar-inverse">

<button class="navbar-toggler" data-toggle="collapse" data-target="#mainMenu">
<span class="navbar-toggler-icon"></span>
</button>

Home
About
Training
Contact

</nav>

相关讨论

就我而言，我正在寻找一种解决方案，以使其中一个导航栏项目能够正确对齐。为此，必须将style="width:100%;"添加到