我想使响应导航栏下拉,当网站在移动打开下拉菜单全屏。 但是当我用“right:0”把它弄到右边的时候,它就会到togle按钮的右边。 如何使它到屏幕的右边和全屏?。 我正在使用Bootstrap 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 -->
这幅画
如果我没理解错的话,下面这些提示可能会有帮助:
要使下拉菜单
成为全屏,可以添加以下样式:
.dropdown-menu {
position: absolute;
}
另外,我建议您使用长文本打断下拉项
的一行,方法是添加
.dropdown-item {
white-space: normal;
}