Question

我想使响应式导航栏下拉菜单在网站在移动设备中打开时全屏显示。但是，当我尝试使用“ right：0”将其移至右侧时，只需转到“ toogle”按钮的右侧即可。如何使其转到屏幕和全屏屏幕的右侧？我正在使用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 -->

The Picture

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;
}

使响应式导航栏下拉

1 个答案: