时间戳

首页 > 解决方案 > Bootstrap 5 下拉菜单向右截断

html - Bootstrap 5 下拉菜单向右截断

问题描述

User 的下拉列表是 cuf of，我使用的是 Bootstrap 5。我在 stackoverflow 上阅读了一篇较旧的文章，建议将.dropdown-menu-left/.dropdown-menu-right放在</ul>对我不起作用的地方。

我想如果我能以某种方式将我的下拉菜单显示在我的用户链接的左下角，那会有什么用。吹我附上了源代码，可能有点多，但也许你需要看到整个nav.

下拉菜单被切断

请参阅右侧的下拉菜单剪切。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-lg">
    <a class="navbar-brand" href="{{ url_for('index') }}">
      <img src="../static/logo.png" alt="" width="30" height="24" class="d-inline-block align-text-top">
      Homepage
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
      aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" href="/blog">Blog</a>
        </li>
      </ul>
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-bs-toggle="dropdown"
            aria-expanded="false">Username
          </a>
          <ul class="dropdown-menu" aria-labelledby="userDropdown">
            <li><a class="dropdown-item" href="/logout">Log Out</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

标签： htmlcsstwitter-bootstrapbootstrap-5

解决方案

在 Bootstrap 5 中left和right 已更改为start和end。因此..

dropdown-menu-right就是现在dropdown-menu-end

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-lg">
    <a class="navbar-brand" href="{{ url_for('index') }}">
      <img src="../static/logo.png" alt="" width="30" height="24" class="d-inline-block align-text-top">
      Homepage
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
      aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" href="/blog">Blog</a>
        </li>
      </ul>
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-bs-toggle="dropdown"
            aria-expanded="false">Username
          </a>
          <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userDropdown">
            <li><a class="dropdown-item" href="/logout">Log Out</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

演示

推荐阅读