作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在研究 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
最佳答案
在 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/
我是一名优秀的程序员,十分优秀!