Html 更改 Bootstrap 下拉菜单的方向
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16167178/
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
Changing the direction of a Bootstrap dropdown
提问by Rachid O
How can I change the direction of a Twitter Bootstrap dropdown?
如何更改Twitter Bootstrap 下拉菜单的方向？
I have a dropdown like this:
我有一个这样的下拉列表：
But I want it to look like this:
但我希望它看起来像这样：
采纳答案by slash197
Use pull-rightor pull-leftclasses.
使用pull-right或pull-left类。
回答by kubilay
From http://getbootstrap.com/components/#dropdowns-alignment:
从http://getbootstrap.com/components/#dropdowns-alignment：
Deprecated .pull-right alignment
As of v3.1.0, we've deprecated .pull-righton dropdown menus. To right-align a menu, use.dropdown-menu-right. Right-aligned nav components in the navbar use a mixin version of this class to automatically align the menu. To override it, use.dropdown-menu-left.
弃用 .pull-right 对齐方式
从 v3.1.0 开始，我们弃用 了下拉菜单中的.pull-right。要右对齐菜单，请使用.dropdown-menu-right。导航栏中右对齐的导航组件使用此类的 mixin 版本来自动对齐菜单。要覆盖它，请使用.dropdown-menu-left.
In your case, adding dropdown-menu-rightclass to the div that has the dropdown-menuclass should do the trick.
在您的情况下，将dropdown-menu-right类添加到具有dropdown-menu该类的 div应该可以解决问题。
回答by Mr. B
Here it is (using dropdown-menu-right):
这是（使用dropdown-menu-right）：
<ul class="dropdown-menu dropdown-menu-right">
<li><a href"#">Action</a></li>
<li><a href="#">Another action</a></li>
<ul>
回答by ?mer Faruk Almal?
transform: rotateYor -webkit-transform:rotateYwill do the trick, let's apply it for the dropdown menu;
transform: rotateY或者 -webkit-transform:rotateY会成功，让我们将其应用于下拉菜单；
navbar .pull-right > li > .dropdown-menu, .navbar .nav > li > .dropdown-menu.pull-right {
-webkit-transform: rotateY(180deg);
}
Or you can insert this into .dropdown-menuor .open > .dropdown-menuclasses due to your exact rquirement. Now it looks like:
或者您可以根据您的确切要求将其插入到.dropdown-menu或.open > .dropdown-menu类中。现在它看起来像：
As can be seen all links need to be reverted so it's simple to do with same CSS rule:
可以看出，所有链接都需要恢复，因此使用相同的 CSS 规则很简单：
.dropdown-menu > li > a {
-webkit-transform: rotateY(180deg);
}
Now it's looking like:
现在它看起来像：
Needs a bit cleanup via changing dropdown-menu's position by left:10px;and it will look like exactly how you wanted:
需要通过更改下拉菜单的位置来进行一些清理left:10px;，它看起来就像您想要的那样：
回答by princebillyGK
Bootstrap 4
引导程序 4
use "dropdown-menu-right" and "dropdown-menu-left"
使用“下拉菜单右”和“下拉菜单左”
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
@username
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#"><i class="fas fa-cog"></i> Account Settings</a>
<a class="dropdown-item" href="#"><i class="fas fa-sign-out-alt"></i> Logut</a>
</div>
</li>
Output:
输出：
for more information visit documentation: https://getbootstrap.com/docs/4.0/components/dropdowns/
有关更多信息，请访问文档：https: //getbootstrap.com/docs/4.0/components/dropdowns/
回答by Parv Sharma
There seem to be no option in Twitter Bootstrap to handle the direction on the dropdown. All that has some effect on the position of the arrow is this class .navbar .nav > li > .dropdown-menu:beforeTry fiddling with it to view changes in the direction of the drop down
Twitter Bootstrap 中似乎没有选项来处理下拉菜单中的方向。所有对箭头位置有一定影响的是这个类.navbar .nav > li > .dropdown-menu:before尝试摆弄它以查看下拉方向的变化
