Bootstrap5：下拉菜单从屏幕右侧消失

html5 • • 问答

我有一个默认的引导程序 5 导航栏，但是当我尝试在右侧放置下拉列表时，下拉项目列表会从右侧的屏幕中消失。这个https://ibb.co/jf3GHfK。

我已经尝试了给其他人的解决方案，例如这里：
Bootstrap 4: Dropdown menu is going off to the right of the screen

在这里：
Bootstrap：下拉菜单相对于导航栏项目的位置

（我试过下拉菜单右或拉右，但对我没有任何作用......）

这是工作不正常的地方：

<ul>
  <li>
    <a
     
      href="#"
     
      role="button"
     
      aria-expanded="false"
    >
      Username
    </a>

    <div
     
      aria-labelledby="navbarDropdown"
    >
      <a href="#"> Edit settings </a>
      <a href="#"> Edit profile page </a>
      <a href="#"> Show profile page </a>
      <a href="#"> Create profile page </a>
    </div>
  </li>
</ul>

这是我的导航栏代码：

<nav>
<div>
<a href="#">Blog</a>
<button
 
  type="button"
 
 
  aria-controls="navbarSupportedContent"
  aria-expanded="false"
  aria-label="Toggle navigation"
>
  <span></span>
</button>
<div>
  <ul>
    <li>
      <a
       
        href="#"
       
        role="button"
       
        aria-expanded="false"
      >
        Categories
      </a>

      <ul aria-labelledby="navbarDropdown">
        <li>
          <a href="#">Cat1</a>
        </li>
        <li>
          <a href="#">Cat2</a>
        </li>
        <li>
          <a href="#">Cat3</a>
        </li>
      </ul>
    </li>

    <li>
      <a href="#">Add post</a>
    </li>
    <li>
      <a href="#">Add category</a>
    </li>

    <li>
      <a href="#">Logout</a>
    </li>
    <li>
      <a href="#">Sign in</a>
    </li>
  </ul>
</div>

<!-- This is what is not working well -->
<ul>
  <li>
    <a
     
      href="#"
     
      role="button"
     
      aria-expanded="false"
    >
      {{ user.first_name }} {{ user.last_name }}
    </a>

    <div
     
      aria-labelledby="navbarDropdown"
    >
      <a href="#"> Edit settings </a>
      <a href="#"> Edit profile page </a>
      <a href="#"> Show profile page </a>
      <a href="#"> Create profile page </a>
    </div>
  </li>
</ul>
<!-- ################################ -->

问候。

回答

确保您正在阅读所用版本的正确文档：
https://getbootstrap.com/docs/5.0/components/dropdowns/#menu-alignment
您将看到 v5.dropdown-menu-end用于右对齐菜单。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

<nav>
  <div>
    <a href="#">Blog</a>
    <button type="button" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  <span></span>
</button>
    <div>
      <ul>
        <li>
          <a href="#" role="button" aria-expanded="false">
        Categories
      </a>

          <ul aria-labelledby="navbarDropdown">
            <li>
              <a href="#">Cat1</a>
            </li>
            <li>
              <a href="#">Cat2</a>
            </li>
            <li>
              <a href="#">Cat3</a>
            </li>
          </ul>
        </li>

        <li>
          <a href="#">Add post</a>
        </li>
        <li>
          <a href="#">Add category</a>
        </li>

        <li>
          <a href="#">Logout</a>
        </li>
        <li>
          <a href="#">Sign in</a>
        </li>
      </ul>
    </div>

    <!-- This is what is not working well -->
    <ul>
      <li>
        <a href="#" role="button" aria-expanded="false">
      John Doe
    </a>

        <div aria-labelledby="navbarDropdown">
          <a href="#"> Edit settings </a>
          <a href="#"> Edit profile page </a>
          <a href="#"> Show profile page </a>
          <a href="#"> Create profile page </a>
        </div>
      </li>
    </ul>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>

以上是Bootstrap5：下拉菜单从屏幕右侧消失的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>