我在 bootstrap 4 中创建了一个下拉列表。我将 dropdown-toggle button 和 dropdown-menu 放在了 div 元素中，class="container" 我希望下拉切换和下拉菜单占据其父元素的整个宽度。我为此编写了这段代码
<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>下拉切换按钮占据了其父 div 的整个宽度。但是，当我点击下拉切换按钮时，我发现下拉菜单没有全宽。我希望下拉菜单的宽度等于它的父宽度我该怎么做？ (我尝试使用 width:inherit; 属性，但没有正常工作)
最佳答案
您不需要额外的 CSS。只需使用 display="static" dropdown option ，以及下拉列表中的 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>
https://www.codeply.com/go/5GjATutCBb
关于html - 如何在 bootstrap 4 中使下拉菜单的宽度等于其父级的宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52242706/