Bootstrap 4导航下拉菜单溢出窗口

Question

我提供了下面一个关于 navbar dropdown 的例子。 当我点击下拉菜单时，菜单会向右溢出，导致窗口出现水平滚动条。

在移动视图中如何使下拉菜单始终保持在窗口内？

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


<nav id="navbar-example2" class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav nav-pills">

    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#one">one</a>
        <a class="dropdown-item" href="#two">two</a>
        <div role="separator" class="dropdown-divider"></div>
        <a class="dropdown-item" href="#three">three</a>
      </div>
    </li>
  </ul>
</nav>

- Raj

---

你为什么要加载两个版本的jQuery？ - WebDevBooster

@WebDevBooster 编辑了它。那是一个错误。 - Raj

@Raj 请检查我的答案，它会帮助你。 - Avanish Kumar

Answer 1

来自Bootstrap 4文档：

默认情况下，下拉菜单会自动定位到其父元素的顶部100％并沿左侧对齐。将.dropdown-menu-right添加到.dropdown-menu以右对齐下拉菜单。

因此，只需添加.dropdown-menu-right即可使菜单右对齐。

- lcjury

---

这应该是Bootstrap 4的被接受答案，因为它不强制覆盖Bootstrap默认值，也不需要在不需要时包装容器。正如文档所述：“默认情况下，导航栏及其内容是流体的。使用可选容器来限制它们的水平宽度。”（https://getbootstrap.com/docs/4.5/components/navbar/#how-it-works） - c4k

不要混淆，你需要同时使用两个类：dropdown-menu dropdown-menu-right。 - dhiraj

Answer 2

覆盖Bootstrap CSS：

.dropdown-menu {
    right: 0 !important;
    left: auto !important;
}

它将为您工作

- Avanish Kumar

---

覆盖Bootstrap CSS通常不是一个好主意，特别是在本来就可以使用原生Bootstrap类的情况下。 - WebDevBooster

@WebDevBooster 是的，但如果我们遇到问题，我们需要进行更新。但我们应该使用自己的类而不是 Bootstrap。 - Avanish Kumar

是的，当你添加不必要的CSS hack时，后来你将需要更多的CSS hack来修复原始CSS hack引起的问题。这绝对是真的。 - WebDevBooster

CSS的hack让使用Bootstrap变得毫无意义，这是我个人的观点。Bootstrap的整个目的就是避免使用CSS的hack。 - WebDevBooster

现在它从屏幕左侧出去，而不是右侧。 - Hikaru Shindo

@HikaruShindo 这取决于您现有的CSS。您必须先分享您的CSS，然后才能得到答案。 - Avanish Kumar

Answer 3

在Bootstrap4中，你需要添加“dropdown-menu-right”，例如：

  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
    </a>
    <div class="dropdown-menu dropdown-menu-right  " aria-labelledby="navbarDropdown">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>

  </li>

对于Bootstrap 5，只需添加“dropdown-menu-end”即可，例如：

        <ul className="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
            <li><a className="dropdown-item" href="#">Action</a></li>
            <li><a className="dropdown-item" href="#">Another action</a></li>
            <li><hr className="dropdown-divider" /></li>
            <li><a className="dropdown-item" href="#">Something else here</a></li>
        </ul>

这只是一个例子，你可以根据自己的情况/需求进行更改。

希望这对你有所帮助。

- K.A

Answer 4

为了解决您的问题，您只需将导航栏包装在一个container（或container-fluid）类中，如下所示：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<nav id="navbar-example2" class="navbar navbar-light bg-light">
   <div class="container">
       <a class="navbar-brand" href="#">Navbar</a>
       <ul class="nav nav-pills">

           <li class="nav-item dropdown pr-3 pr-sm-2">
               <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
               <div class="dropdown-menu">
                   <a class="dropdown-item" href="#one">one</a>
                   <a class="dropdown-item" href="#two">two</a>
                   <div role="separator" class="dropdown-divider"></div>
                   <a class="dropdown-item" href="#three">three</a>
               </div>
           </li>
       </ul>
   </div>
</nav>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

此外，pr-3 pr-sm-2 类还为下拉菜单添加了一些“padding-right”样式。

- WebDevBooster

---

在大屏幕上它能正常工作，但在小屏幕上仍然超出了窗口。 - Raj

我编辑了我的代码片段。现在请检查它。添加的 pr-3 pr-sm-2 类会为下拉菜单添加一些 "padding-right"。 - WebDevBooster