twitter-bootstrap Boostrap 4 导航栏折叠菜单右对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47518911/
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
Boostrap 4 Navbar Collapse Menu Right Align
提问by TylerKVu
I am using Bootstrap 4 and I am trying to make the menu that pops up by clicking the collapse button to open on the right side instead of the left. I have tried using "ml-auto" on the "ul" element. The navbar items are correctly on the right side when it isn't collapsed. When it is collapsed, the button is correctly on the right side but the menu pops up on the left. I have also tried putting "ml-auto" in the div as well but that didn't work. Here is my HTML:
我正在使用 Bootstrap 4，我试图通过单击折叠按钮在右侧而不是左侧打开弹出菜单。我尝试在“ul”元素上使用“ml-auto”。导航栏项目未折叠时正确位于右侧。折叠时，按钮正确位于右侧，但菜单在左侧弹出。我也试过将“ml-auto”放在 div 中，但这没有用。这是我的 HTML：
<nav class="navbar navbar-expand-lg navbar-dark fixed-top">
<a class="navbar-brand" href="#home"><img id="logo" class="no-opacity" src="content/white-logo.png"></a>
<button class="navbar-toggler ml-auto" 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>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#home"><i class="fa fa-home fa-fw" aria-hidden="true"></i> Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about"><i class="fa fa-user fa-fw" aria-hidden="true"></i> About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#projects"><i class="fa fa-folder-open fa-fw" aria-hidden="true"></i> Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#experience"><i class="fa fa-briefcase fa-fw" aria-hidden="true"></i> Experience</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact"><i class="fa fa-envelope fa-fw" aria-hidden="true"></i> Contact</a>
</li>
</ul>
</div>
</nav>
I feel like there is a simple solution but I can't figure it out. Thanks for the help!
我觉得有一个简单的解决方案，但我无法弄清楚。谢谢您的帮助！
回答by norbidrak
Just add simple rule to your css.
只需将简单的规则添加到您的 css 中即可。
.nav-item{
text-align: right;
}
回答by Pavel Komarov
According to http://getbootstrap.com/docs/4.0/components/navs/#horizontal-alignment, the way to center, right-justify, or left-justify things in the navbar's collapsed dropdown is to use justify-content-endand friends in the classof a nav.
据http://getbootstrap.com/docs/4.0/components/navs/#horizontal-alignment，顺便中心，右对齐或左对齐的东西在导航栏的下拉倒塌是利用justify-content-end和朋友在class中一个nav。
Example. This code yields the image following it.
例子。此代码生成其后的图像。
<nav class="navbar navbar-expand-lg fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<ul class="list-inline social-buttons">
{% for link in site.social %}
<li class="list-inline-item">
<a href="{{ link.url }}"><i class="{{ link.icon }}"></i></a>
</li>
{% endfor %}
</ul>
<div class="navbar-toggler" data-toggle="collapse" data-target="#menu">
☰<!-- three bars symbol -->
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="menu">
<ul class="nav ml-auto">
<a class="nav-link page-scroll" href="#about">About</a>
<a class="nav-link page-scroll" href="#projects">Projects</a>
<a class="nav-link page-scroll" href="#writing">Writing</a>
<a class="nav-link page-scroll" href="#contact">Contact</a>
</ul>
</div>
</div>
</nav>
Now amending that one line to:
现在将这一行修改为：
<div class="nav ml-auto justify-content-end">
yields
产量
Note this evidently has nothing to do with ml-auto, which when missing causes the uncollapsed menu items (on a wider screen) to not be right-justified. (The toggler button itself is always right justified for me.) Only justifyseems to control the stuff in the uncollapsed menu.
请注意，这显然与 无关ml-auto，缺少时会导致未折叠的菜单项（在更宽的屏幕上）无法右对齐。（切换按钮本身对我来说总是正确的。）justify似乎只能控制未折叠菜单中的内容。
回答by Ji?í Mika
Just use "text-right" in HTML
只需在 HTML 中使用“text-right”
For example:
例如：
<div class="navbar-collapse text-right" id="navbarResponsive">
<div class="navbar-collapse text-right" id="navbarResponsive">
