这是我的html和CSS代码
<div class="header">
<div class="container-fluid">
<div class="row">
<div class="col-1"></div>
<div class="col-10"></div>
<div class="col-1 dropdown">
<button class="btn" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
Menu
<i class="fa fa-bars"></i>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">About </a>
<a class="dropdown-item" href="#">Education</a>
<a class="dropdown-item" href="#">Hobbies</a>
<a class="dropdown-item" href="#">Contact</a>
</div>
</div>
</div>
</div>
.header{
position: relative;
top: 20px;
}
.dropdown-menu {
min-width: 120px !important;
height: 145px !important;
position: relative;
right: 0;
}
body {
background-color: lightblue;
}
我要使下拉菜单向右移动而不是向左移动what i want to achieve 但是我得到的代码是这个what i got
答案 0 :(得分:0)
如果您使用的是引导程序,则不需要任何自定义CSS。
默认情况下,下拉菜单会自动从其父菜单的顶部和左侧开始100%定位。将.dropdown-menu-right添加到.dropdown-menu以使下拉菜单右对齐。
引用:https://getbootstrap.com/docs/4.0/components/dropdowns/#menu-alignment
演示:https://jsfiddle.net/7aso841L/
ForEach(items) { item in