Bootstrap 导航栏下拉菜单项右侧 [英] Bootstrap Navbar Dropdown Menu Items Right

问题描述

如下图所示，当我点击铃铛图标时，图标右下角会出现一个下拉菜单.我希望这个下拉菜单出现在左下角而不是右下角.我该怎么办?

<div class="container"><div class="navbar-nav d-flex flex-row">...

</nav>

解决方案

Bootstrap 5(2021 年更新)

使用 dropdown-menu 上的 dropdown-menu-end 类将菜单内的项目向右对齐..

 
<a class="dropdown-item";href=#">链接</a><a class="dropdown-item";href=#">链接</a><a class="dropdown-item";href=#">链接</a>

https://codeply.com/p/kWLLKdjdpC

引导程序 4(原始答案)

使用 dropdown-menu-right 类将菜单内的项目向右对齐..

 
<a class="dropdown-item";href=#">链接</a><a class="dropdown-item";href=#">链接</a><a class="dropdown-item";href=#">链接</a>

http://codeply.com/go/6Mf9aK0P8G

As you see in the picture below, when I click on the bell icon, a dropdown menu appears at the bottom-right of the icon. I want this dropdown menu to appear at bottom-left instead of bottom-right. What should I do?

<nav class="navbar">
  <div class="container">
    <div class="navbar-nav d-flex flex-row">
      ...
    </div>
  </div>
</nav>

解决方案

Bootstrap 5 (update 2021)

Use the dropdown-menu-end class on the dropdown-menu to align the items inside the menu right..

    <div class="dropdown-menu dropdown-menu-end">
        <a class="dropdown-item" href="#">Link</a>
        <a class="dropdown-item" href="#">Link</a>
        <a class="dropdown-item" href="#">Link</a>
    </div>

https://codeply.com/p/kWLLKdjdpC

Bootstrap 4 (original answer)

Use the dropdown-menu-right class to align the items inside the menu right..

    <div class="dropdown-menu dropdown-menu-right text-right">
        <a class="dropdown-item" href="#">Link</a>
        <a class="dropdown-item" href="#">Link</a>
        <a class="dropdown-item" href="#">Link</a>
    </div>

http://codeply.com/go/6Mf9aK0P8G

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