关于css：Bootstrap 4将导航栏项目向右对齐

Bootstrap 4 align navbar items to the right

如何将导航栏项目右对齐？

我要登录并在右边注册。
但是我尝试的所有方法似乎都无法正常工作。

Picture of Navbar

到目前为止，这是我尝试过的：

style="float: right"

周围带有属性的：style="text-align: right"
在
标记上尝试了这两件事
再次尝试了所有这些操作，最后添加了!important
在
中将nav-item更改为nav-right
在
中添加了pull-sm-right类
在
中添加了align-content-end类

这是我的代码：

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

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
Navbar
<ul class="navbar-nav">
<li class="nav-item active">
Home <span class="sr-only">(current)</span>

</li>

<li class="nav-item">
Features

</li>

<li class="nav-item">
Pricingg

</li>

</ul>

<ul class="navbar-nav">
<li class="nav-item">
Login

</li>

<li class="nav-item">
Register

</li>

</ul>

</nav>
@yield('content')

相关讨论

Bootstrap 4有许多不同的方式来对齐导航栏项目。 float-right将不起作用，因为导航栏现在为flexbox。

您可以将新的mr-auto用于第一(左)navbar-nav的自动右页边距。
或者，可以在第二个(右侧)navbar-nav上使用ml-auto，或者如果您只有一个navbar-nav。

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

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
Navbar
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
Home <span class="sr-only">(current)</span>

</li>

<li class="nav-item">
Features

</li>

<li class="nav-item">
Pricingg

</li>

</ul>

<ul class="navbar-nav">
<li class="nav-item">
Login

</li>

<li class="nav-item">
Register

</li>

</ul>

</nav>

还有一些flexbox工具。在这种情况下，您有2个navbar-nav，因此navbar-collapse中的justify-content-between会在它们之间的均匀空间上工作，

1
2
3
4
5
6
7
8
9

Bootstrap 4.0及更高版本的更新

从Bootstrap 4 beta开始，ml-auto仍然可以将项目推到右侧。请注意navbar-toggleable-类已更改为navbar-expand-*

更新了适用于Bootstrap 4的导航栏

另一个常见的Bootstrap 4导航栏右对齐方案包括在右侧的按钮，该按钮保持在移动折叠导航外部，因此始终以所有宽度显示。

右对齐按钮始终可见

enter image description here

相关：具有左，中或右对齐项的Bootstrap NavBar

相关讨论

就我而言，我只需要一组导航按钮/选项，并发现这可以工作：

1
2
3
4
5
6
7
8

因此，您将justify-content-end添加到div并在列表上省略mr-auto。

这是一个工作示例。

相关讨论

对于仍在BS4中解决此问题的人，只需尝试以下代码-

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

相关讨论

在Bootstrap 4上

如果要将品牌左对齐，将所有导航栏项目右对齐，请将默认的mr-auto更改为ml-auto

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

在Bootsrap 4.0.0-beta.2上，此处列出的所有答案均不适合我。最后，Bootstrap站点不是通过文档而是通过页面源代码为我提供了解决方案...

Getbootstrap.com在以下类的帮助下将其navbar-nav的右边对齐：ml-md-auto。

相关讨论

在ul上应用nav justify-content-end后，使用ml-auto代替mr-auto

如果您要在nav-brand之后立即在左侧添加"主页"，"功能和价格"，然后在右侧登录并注册，然后将两个列表包装在中并使用.justify-content-between：

1
2
3
4
5
6
7
8

只需在ul处添加mr-auto类：

1	<ul class="nav navbar-nav mr-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
29
30
31
32
33
34
35
36
37

<ul class="navbar-nav mr-auto">
<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>

<ul class="navbar-nav ml-auto">
<li class="nav-item active">
left 1

</li>

<li class="nav-item">
left 2

</li>

<li class="nav-item">
left disable

</li>

</ul>

使用flex-row-reverse类

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

<nav class="navbar navbar-toggleable-md navbar-light">

<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<i class="fa fa-hospital-o fa-2x" aria-hidden="true">

<ul class="navbar-nav">

<li>
Home <span class="sr-only">(current)</span></a
</li>

<li>
Doctors
</li>

<li>
Specialists
</li>

<li>
About
</li>

</ul>

</nav>

使用此代码将项目向右移动。

相关讨论

Boostrap 4的变化不大。
要将导航栏对齐到右侧，只需进行两项更改。
他们是：

在navbar-nav类中将w-100添加为navbar-nav w-100以使宽度为100
在nav-item dropdown类中，将ml-auto添加为nav-item dropdown ml-auto，以使边距保留为自动。

如果您不明白，请参阅我所附的图片。

CodePen链接

enter image description here

完整的源代码

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
Navbar
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

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

</li>

<li class="nav-item">
Features

</li>

<li class="nav-item">
Pricing

</li>

<li class="nav-item dropdown ml-auto">

Dropdown link

Action
Another action
Something else here

</li>

</ul>

</nav>

对于Bootstrap 4.3.1，我使用的是nav-pills，但对我来说没有任何作用：

1
2
3
4
5
6

BS v4.0.0-beta.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

<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
Navbar
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

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

</li>

<li class="nav-item">
Features

</li>

<li class="nav-item">
Pricingg

</li>

</ul>

<ul class="navbar-nav">
<li class="nav-item">
Login

</li>

<li class="nav-item">
Register

</li>

</ul>

</nav>

container content



<script src="node_modules/jquery/dist/jquery.slim.min.js">
<script src="node_modules/popper.js/dist/umd/popper.min.js">
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js">
</body>

对于Bootstrap 4 beta，样本导航栏的元素与右侧对齐：

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

<nav class="navbar navbar-expand-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
Navbar
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
Home <span class="sr-only">(current)</span>

</li>

<li class="nav-item">
Features

</li>

<li class="nav-item">
Pricingg

</li>

</ul>

<ul class="navbar-nav">
<li class="nav-item">
Login

</li>

<li class="nav-item">
Register

</li>

</ul>

</nav>

我正在运行Angular 4(v.4.0.0)和ng-bootstrap(Bootstrap 4)。这段代码并非全部相关，但希望人们能够选择合适的方法。我花了一些时间找到一种解决方案，以使我的物品合理，正确折叠并实现我的Google下拉菜单(使用OAuth)个人资料图片。

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

<nav class="navbar navbar-toggleable-sm navbar-inverse bg-faded fixed-top">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<img alt='Brand' src='../assets/images/logo-white.png' class='navbar-logo-img d-inline-block align-top '>
<span class="navbar-logo-text">Oncoscape</span>

<ul class="navbar-nav float-left">

<span class="fa fa-dashboard"></span>Dashboard

<span class="fa fa-comments"></span>Feedback

<li class="nav-item dropdown">

<img *ngIf='user && authenticated' class="navbar-pic" src={{user.thumbnail}} alt="Smiley face">

Account

</app-login>

</li>

</ul>

</nav>

<router-outlet></router-outlet>

如果以上所有方法均失败，则将CSS的navbar类的宽度增加了100％。在那之前，auto先生在使用4.1的项目上对我不起作用。

使用Bootstrap Flex Box有助
我们来控制您的导航元素的位置和对齐方式。
对于上述问题，添加mr-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
29
30
31
32
33
34
35
36
37
38
39
40

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
Navbar
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
Home <span class="sr-only">(current)</span>

</li>

<li class="nav-item">
Features

</li>

<li class="nav-item">
Pricingg

</li>

</ul>

<ul class="navbar-nav ">
<li class="nav-item">
Login

</li>

<li class="nav-item">
Register

</li>

</ul>

</nav>
@yield('content')

其他位置可能包括

1
2
3

fixed- top
fixed bottom
sticky-top

在verndor-prefixes.less中找到69行，并将其写为：

1
2
3
4
5
6
7
8
9

.panel {
margin-bottom: 20px;
height: 100px;
background-color: #fff;
border: 1px solid transparent;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
box-shadow: 0 1px 1px rgba(0,0,0,.05);
}

只需从发布的版本4的getbootstrap页面之一中复制它，即可比上述版本更好地工作

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

<ul class="section-nav">
<li class="toc-entry toc-h2">Overview
</li>

<li class="toc-entry toc-h2">Classes
</li>

<li class="toc-entry toc-h2">Mixins
</li>

<li class="toc-entry toc-h2">Responsive
</li>

</ul>

我是堆栈溢出的新手，也是前端开发的新手。这对我有用。所以我不想显示列表项。

1
2
3
4
5
6
7
8
9

.hidden {
display:none;
}

#loginButton{

margin-right:2px;

}

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

<nav class="navbar navbar-toggleable-md navbar-light bg-faded fixed-top">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
NavBar

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

</li>

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

</li>

<li class="nav-item hidden">
Disabled

</li>

</ul>

<form class="form-inline my-2 my-lg-0">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit" id="loginButton">Log In</button>
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Register</button>
</form>

</nav>