Question

我正在研究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会向右显示，类似于{{3 }}

Answer 1

在引导程序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

Answer 2

我从引导网站复制了代码。

function mp_div_(){
$p = func_get_args();
$s='';
foreach($p as $val){
    $s.=$val;
}
return $s;

我看到这不在您的代码中

<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);"

尝试将它们添加到您的代码中。

如何在Bootstrap 4.1中将鼠标悬浮在子菜单下拉菜单项上？

2 个答案: