Html Bootstrap 4 -- 使用切换按钮将链接移动到导航栏的右侧
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41711978/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 4 -- Moving links to the right of the navbar with a toggle button
提问by Cameron Foster
I was attempting to move the links from the left of the navbar to the right side and it wouldn't let me. I've tried floating it to the right and nothing had happened, same with position:relative; right: 200px; and padding-right: -200px;. If anyone has any other suggestions it would be appreciated thank you.
我试图将链接从导航栏左侧移动到右侧，但它不允许我这样做。我试过将它向右浮动，但什么也没发生，与 position:relative 相同；右：200px；和填充右：-200px;。如果有人有任何其他建议，将不胜感激，谢谢。
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<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>
<a class="navbar-brand" href="index.html">
<img id="logo" src="images/logo.png" width="200" class="d-inline-block align-top" alt="">
</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link active text-white" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="services.html">Services</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="portfolio.html">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="about.html">About</a>
</li>
</ul>
</div>
</nav>
回答by Julian S
You're using the .mr-autoso you have margin-right: auto !importantand the nav-items left aligned.
If you change the class to .ml-autoyou have margin-left: auto !importantand your nav-items are right aligned
您正在使用，.mr-auto所以您拥有margin-right: auto !important并且导航项目左对齐。
如果您将课程更改为.ml-auto您拥有的margin-left: auto !important并且您的导航项目右对齐
回答by A G Aranha
After trying all options, the menu-icon (navbar-toggler-icon) was not moving to the right in Bootstrap 4.1.
I tried the following work around:
Under @media (max-width:575px)- added .navbar-header {width:100%;}, and under class .menu-icon(I named it menu-icon) {justify-content:end;}.
This moved both the navbar-brandand menu-iconto the right. To move the navbar-brandto the left, in the HTML added class mr-autoto navbar-brand. This worked just fine for me.
尝试所有选项后，菜单图标 (navbar-toggler-icon) 在 Bootstrap 4.1 中没有向右移动。
我尝试了以下解决方法：
Under- @media (max-width:575px)added.navbar-header {width:100%;}和 under class .menu-icon(我将其命名为 menu-icon) {justify-content:end;}。
这使navbar-brand和menu-icon都向右移动。将navbar-brand向左移动，在 HTML 中添加类mr-auto到navbar-brand. 这对我来说效果很好。
回答by Mukesh Ram
Modify some css in bootstrap:
修改bootstrap中的一些css：
Used justify-content: end;to start content for end
用于justify-content: end;开始结束的内容
.mr-auto {
margin-right: 0 !important;
}
.navbar-toggleable-md .navbar-collapse {
-webkit-justify-content: flex-end;
justify-content: flex-end;
}
Here is fiddle code: https://jsfiddle.net/0ewenvcb/2/
这是小提琴代码：https: //jsfiddle.net/0ewenvcb/2/
回答by Dominic Davies
If all above fails, I added 100% width to the navbar class in CSS. Until then mr-auto wasn't working for me on this project using Bootstrap 4.1.
如果以上所有方法都失败了，我将 100% 的宽度添加到 CSS 中的导航栏类。在那之前，在使用 Bootstrap 4.1 的这个项目中，mr-auto 并没有为我工作。
