如何在 Bootstrap 4.1 中悬停时将子菜单下拉项向右移动？

Posted 2023-05-08

【中文标题】如何在 Bootstrap 4.1 中悬停时将子菜单下拉项向右移动？

【英文标题】：How to move the sub-menu drop-down items towards right on hover in Bootstrap 4.1?

【发布时间】：2018-12-31 05:43:26

【问题描述】：

我正在处理website，其中子菜单下拉项显示在底部，如下所示。

我使用的 html/CSS 代码如下：

HTML 代码：

<div class="navbar-collapse text-center" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<!-- 
   <button type="submit" onclick="location.href='/prostore';" class="btn btn-default">Hello World</button>
    -->
<li class="menu-item nav-item dropdown">
   <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
   main menu
   </a>
   <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
      <a class="dropdown-item" href="#">about</a>
      <a class="dropdown-item" href="#">blog</a>
      <a class="dropdown-item" href="#">contact us</a>
      <div class="submenu-item">
         <a class="dropdown-item dropdown-toggle dropright" href="#" id="navbarDropdownSubMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         Social
         </a>
         <div class="dropdown-menu" aria-labelledby="navbarDropdownSubMenuLink">
            <a class="dropdown-item" href="#">T</a>
            <a class="dropdown-item" href="#">U</a>
            <a class="dropdown-item" href="#">V</a>
            <a class="dropdown-item" href="#">W</a>
         </div>
      </div>
   </div>

CSS 代码：

.menu-item:hover > .dropdown-menu 
  display: block;


/* makes sub-menu S open on hover */
.submenu-item:hover > .dropdown-menu 
  display: block;

问题陈述：

我想知道我应该在上面的 HTML/CSS 中进行哪些更改，以便 如果我们将鼠标悬停在社交上，下拉项 T、U、V 和 W 会向右显示，类似于 this

【问题讨论】：

我一直在玩dropright，我可以让它为你的“主菜单”工作，但子导航不适合 dropright。我将继续看看哪种组合会起作用，但我现在必须收工。 GL，我会看看我能找到什么 - 这是一个有趣的谜题。

【参考方案1】：

在 bootstrap 4 之前，您会使用 pull-right，但从 4 开始，他们将 pull-right 更改为 float-(sm,md,lg,xl)-(left,right,none)。所以我会尝试float-sm-right。 https://getbootstrap.com/docs/4.0/migration/#utilities

【讨论】：

你能告诉我我需要在哪里更改代码吗？我为此创建了link，以便您轻松可视化。

将 text-align: right 添加到 .submenu-item:hover > .dropdown-menu。你不必设置任何浮动。

text-align:right 似乎无法正常工作。如果你检查这个link，我想要这样的东西。

BS4 介绍了drop-right。 See this

@fnostro 你能给我一个指针，我如何在上面的代码中复制它？

【参考方案2】：

我从 bootstrap 网站复制了代码。

<div class="bd-example">
  <div class="btn-group dropright">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  Dropright
    </button>
    <div class="dropdown-menu" x-placement="right-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(108px, 0px, 0px);">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>

  <div class="btn-group dropright show">
    <button type="button" class="btn btn-secondary">
  Split dropright
    </button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
      <span class="sr-only">Toggle Dropright</span>
    </button>
    <div class="dropdown-menu show" x-placement="right-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(153px, 0px, 0px);">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
</div>

我发现这不在你的代码中

x-placement="right-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(108px, 0px, 0px);"

和

<div class="btn-group dropright show">

尝试将这些添加到您的代码中。