下拉菜单右下角的下拉菜单不对齐到右侧 [英] Dropdown menu with the dropdown-menu-right class does not align to the right

问题描述

我有以下导航栏结构（ {{current_user.username}} 来自我的模板系统）：

 < ul class =navbar-nav mr-auto mt-2 mt-lg-0> 
<！ -  navbar物品 - > 
< / ul> 
< div class =dropdown show> 
 < i class =fa fa-useraria-hidden =true>< / i> 
 {{current_user.username}} 
< / a> 
< ul class =dropdown-menu dropdown-menu-rightrole =menuaria-labelledby =dropdownLink> 
< li>< a class =dropdown-itemhref =＃>个人资料< / a>< / li> 
<！ -  etc  - > 
< / ul> 
< / div> 
  

下拉部分与屏幕右侧对齐，但点击它会显示下拉菜单关闭屏幕右侧，下拉菜单右侧类应该阻止。任何想法？

最小的Codepen： https：/ /codepen.io/Majora320/pen/jGwNrE

解决方案

如果您添加样式

  right：0 
  

至

  .dropdown-menu 
  

款式规则......它会按照你的意愿去做。

I have the following navbar structure ({{ current_user.username }} is from my templating system):

<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
    <!-- navbar items -->
</ul>
<div class="dropdown show">
    <a class="dropdown-toggle" style="color: inherit" href="#" id="dropdownLink" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
        <i class="fa fa-user" aria-hidden="true"></i>
        {{ current_user.username }}
    </a>
    <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownLink">
        <li><a class="dropdown-item" href="#">Profile</a></li>
        <!-- etc -->
    </ul>
</div>

The dropdown part is aligned to the right of the screen, but clicking on it displays the dropdown menu going off the right of the screen, which the dropdown-menu-right class is supposed to prevent. Any ideas?

Minimal Codepen: https://codepen.io/Majora320/pen/jGwNrE

解决方案

If you add the style

right: 0

to

 .dropdown-menu

style rule... it will do what you want.

这篇关于下拉菜单右下角的下拉菜单不对齐到右侧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！