如何在 Bootstrap 4 中使下拉菜单的宽度等于其父菜单的宽度

Question

如何在 Bootstrap 4 中使下拉菜单的宽度等于其父菜单的宽度

我正在 bootstrap 4 中创建一个下拉菜单。我将下拉切换按钮和下拉菜单放置在class="container" 的 div 元素中，我希望下拉切换和下拉菜单占据其父元素的全宽。我为此编写了这段代码

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<body>
  <div class="container">
    <button class="dropdown-toggle btn-block" data-toggle="dropdown">
      dropdown
    </button>
    <div class="dropdown-menu">
      <a href="" class="dropdown-item">one</a>
      <a href="" class="dropdown-item">two</a>
      <a href="" class="dropdown-item">three</a>
      <a href="" class="dropdown-item">four</a>
    </div>
</div>
    <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>

</body>

Run Code Online (Sandbox Code Playgroud)

下拉切换按钮占据其父 div 的整个宽度。但是，当我单击下拉切换按钮时，我发现下拉菜单没有占据全宽。我希望下拉菜单的宽度等于它的父宽度，我该怎么做？（我尝试使用 width:inherit; 属性，但效果不佳）

Answer 1

Zim*_*Zim 6

您不需要额外的 CSS。只需使用display="static" 下拉选项以及下拉列表中的w-100和position-static类即可使其占据 100% 的父宽度。

<div class="container">
    <button class="dropdown-toggle btn-block" data-toggle="dropdown" data-display="static">
        dropdown
    </button>
    <div class="dropdown-menu position-static w-100">
        <a href="" class="dropdown-item">one</a>
        <a href="" class="dropdown-item">two</a>
        <a href="" class="dropdown-item">three</a>
        <a href="" class="dropdown-item">four</a>
    </div>
</div>

Run Code Online (Sandbox Code Playgroud)

https://www.codeply.com/go/5GjATutCBb

另请参阅：如何在导航栏中制作 Bootstrap 4 全宽下拉菜单？

Answer 2

Has*_*ash 2

下拉菜单有position:absolute属性。因此，添加width:100%;将使下拉菜单占据页面的整个宽度，而不是占据容器的整个宽度。要使下拉菜单采用其父元素的宽度，请使父元素的定位相对。要解决这个问题，首先要class="position-relative"在dropdown-menu的父元素上添加属性。现在将 w-100 添加到下拉菜单 div 的 class 属性。

<div class="container position-relative">
<button class="dropdown-toggle btn-block" data-toggle="dropdown">
  dropdown
</button>
<div class="dropdown-menu w-100">
  <a href="" class="dropdown-item">one</a>
  <a href="" class="dropdown-item">two</a>
  <a href="" class="dropdown-item">three</a>
  <a href="" class="dropdown-item">four</a>
</div>

Run Code Online (Sandbox Code Playgroud)

归档时间：	7 年，3 月前
查看次数：	6461 次
最近记录：	5 年，4 月前