Html 如何解决下拉菜单的定位问题
这是我现在的html和css代码Html 如何解决下拉菜单的定位问题,html,css,bootstrap-4,dropdown,Html,Css,Bootstrap 4,Dropdown,这是我现在的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 cla
<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>
我想让下拉菜单移到右边而不是左边
但是我的代码是这样的,如果你使用引导,你不需要任何定制的css 默认情况下,下拉菜单自动定位在距父菜单顶部100%的位置,并沿父菜单的左侧。将.dropdown menu右键添加到.dropdown menu右键对齐下拉菜单 参考: 演示:
菜单
.header{
position: relative;
top: 20px;
}
.dropdown-menu {
min-width: 120px !important;
height: 145px !important;
position: relative;
right: 0;
}
body {
background-color: lightblue;
}
<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 dropdown-menu-right">
<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>