制作响应式导航栏下拉列表

Question

我想使响应式导航栏下拉列表，当网站在移动设备中打开下拉菜单时，下拉菜单全屏显示。但是当我尝试用"right：0"向右移动时，它只是转到 toogle 按钮的右侧。如何让它转到屏幕和全屏的右侧？我正在使用引导程序 4

<!-- Grup Tombol -->
<div class="col-6 col-sm-3 col-md-3 col-lg-2 d-flex align-items-center justify-content-end custom-grup-tombol">
<div class="row">
<!-- Chat -->
<div class="nav-item btn-group pl-1 ">
<button type="button" class="btn btn-info btn-block rounded" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="far fa-comments"></i>
</button>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
<!-- End Chat -->
<!-- Notif -->
<div class="nav-item btn-group pl-1 ">
<button type="button" class="btn btn-info btn-block rounded" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-bell"></i>
</button>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Lorem ipsum dolor sit amet consectetur adipisicing elit.</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
<!-- End Notif -->
<!-- User-->
<div class="nav-item btn-group pl-1 ">
<button type="button" class="btn btn-info btn-block rounded" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-user-circle"></i>
</button>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
<!-- End User--> 
</div>           
</div>
<!-- END Grup Tombol -->

图片

Answer 1

如果我理解正确，这些提示可能会有所帮助：

要使dropdown-menu正确附加，您可以在样式中添加以下行：

.dropdown-menu {
top: calc(2em + 2rem + 2px) !important;
right: 0 !important;
}
.nav-item, .btn-group>.btn, .navbar, div.justify-content-end.custom-grup-tombol {
position: static !important;
}

另外，我建议您dropdown-item通过添加

.dropdown-item {
white-space: normal;
}