Bootstrap 下拉菜单显示在右侧

Posted 2023-03-05

【中文标题】Bootstrap 下拉菜单显示在右侧

【英文标题】：Bootstrap dropdown menu show on right side

【发布时间】：2022-01-22 15:15:58

【问题描述】：

我正在创建一个下拉菜单，我想在右侧显示下拉项。它已经在工作，但不知何故下拉菜单没有完全显示。下拉菜单在侧边栏内，当侧边栏空间不够时。它会削减一半。

我的代码是这样的（对不起内联css）：

<div class="dropright">
    <button type="button" class="" style="background: none;
      color: inherit;
      border-top: 1px solid white;
      border-bottom: 1px solid white;
      border-left: 0;
      border-right: 0;
      padding: 10px 12px;
      font: inherit;
      cursor: pointer;
      align-items: center;
      width: 80%;
      outline: inherit;" 
      data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Items
    </button>
       
<div class="dropdown-menu" x-placement="right-start" 
      style="position: absolute; 
      transform: translate3d(111px, 0px, 0px); 
      top: 0px; 
      left: 0px; 
      will-change: transform;">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
 </div>

</div>

如下图，一半落后了。

这是我的侧边栏代码：

<div class="main-menu menu-fixed menu-dark menu-accordion menu-shadow" data-scroll-to-active="true">
<div class="main-menu-content">
        <ul class="navigation navigation-main" id="main-menu-navigation" data-menu="menu-navigation"
            data-icon-style="lines" style="position: relative">

            <li class=" navigation-header"><span>SUPER ADMIN</span>
            </li>

            <li class=" nav-item"><a href=" route('home') "><i class="menu-livicon"
                data-icon="line-chart"></i><span class="menu-title" data-i18n="home"><span
                    class="menu-title" data-i18n="home">Dashboard</span></a>
            </li>
     
            <div class="dropright">
                <button type="button" class="" style="background: none;
                color: inherit;
                border-top: 1px solid white;
                border-bottom: 1px solid white;
                border-left: 0;
                border-right: 0;
                padding: 10px 12px;
                font: inherit;
                cursor: pointer;
                align-items: center;
                width: 100%;
                outline: inherit;" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                 Items
                </button>
                <div class="dropdown-menu" x-placement="right-start" style="position: absolute; transform: translate3d(111px, 0px, 0px); top: 0px; left: 0px; will-change: transform;">
                  <a class="dropdown-item" href="#">Action</a>
                  <a class="dropdown-item" href="#">Another action</a>
                </div>
              </div>

               
        
            <li class=" navigation-header"><span>MENU</span>
            </li>

    <li class=" nav-item"><a href=" route('home') "><i class="menu-livicon"
                data-icon="line-chart"></i><span class="menu-title" data-i18n="home"><span
                    class="menu-title" data-i18n="home">Data Master</span></a>
            </li>

         
        </ul>
    </div>
</div>

【参考方案1】：

您可以通过将z-index: 10; 添加到类dropdown-item 来解决它吗？

或添加内联css如下：

    <a class="dropdown-item" style="z-index: 10;" href="#">Action</a>
    <a class="dropdown-item" style="z-index: 10;" href="#">Another action</a>

来源： https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

【讨论】：

我试过使用z-index，但还是不行

请根据堆栈溢出策略共享正确的代码渲染视图，以正确测试它并为您提供正确的答案，从共享图像它会造成不必要的延迟或答案

添加侧边栏代码