如何在Bootstrap 4.1中将子菜单项向右移动悬停？
如何在Bootstrap 4.1中将子菜单项向右移动悬停？
提问于 2018-07-24 01:39:09
我正在开发一个website，其中的子菜单下拉项显示在底部的中，如下所示。
我使用的HTML/CSS代码如下：
超文本标记语言代码：
<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会向右显示，类似于
回答 2
Stack Overflow用户
发布于 2018-07-24 02:03:46
在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
Stack Overflow用户
发布于 2018-07-24 04:06:16
我从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">尝试将这些添加到您的代码中。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51484431
复制相关文章
相似问题