gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 14:52:08 24 4
gpt4 key购买 nike

我正在研究 website其中子菜单下拉项显示在底部,如下所示。

enter image description here


我为此使用的 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

最佳答案

在 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

关于html - 如何在 Bootstrap 4.1 中悬停时将子菜单下拉项向右移动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51484431/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com