右侧的Bootstrap v4.0汉堡包项目 [英] Bootstrap v4.0 hamburger items on the right
问题描述
傻问题:使用Bootstrap v4.0.我们如何将汉堡包"物品放在右侧而不是左侧? 基本上，我要这样，正好相反
Silly question: Working with Bootstrap v4.0. How can we put 'hamburger' items on the right side, instead of left side? Basically, I want this, just opposite sides
另一个例子:我需要将物品放置在汉堡"下方，而不是在左侧:
Another example: I need items to be just under 'hamburger', not on the left side:
我查看了 http://getbootstrap.com/docs/4.0/components/navbar/，在右侧引导4个导航栏项，引导4中导航栏右侧的折叠按钮
每个人都在谈论常规导航栏中的项目.但是折叠的导航栏中的项目呢?
Everybody talks about items in regular navbar. But what about items in collapsed navbar?
*使用Bootstrap 3一切正常，我只是找不到使用Bootstrap v4.0的方法.
*with Bootstrap 3 everything worked fine, I just cannot find how to do it with Bootstrap v4.0.
谢谢！
推荐答案
检查下面的代码.
我已经将float-right，text-right和pr-3类(右填充)添加到div 内部 navbar-collapse div中.
I've added the classes float-right, text-right, and pr-3 (padding-right) to the div inside navbar-collapse div.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
<div class="navbar-nav float-right text-right pr-3">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</body>
</html>
这篇关于右侧的Bootstrap v4.0汉堡包项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
