如何在引导程序 4 中使下拉菜单的宽度等于其父级的宽度答案

【问题标题】：How to make width of dropdown-menu equal to width of it's parent in bootstrap 4如何在引导程序 4 中使下拉菜单的宽度等于其父级的宽度
【发布时间】：2019-02-13 23:56:48
【问题描述】：

我在 bootstrap 4 中创建了一个下拉菜单。我将 dropdown-toggle 按钮 和 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; 属性但没有正常工作）

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

您不需要额外的 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

另见：How to make a Bootstrap 4 full width dropdown in Navbar?

【讨论】：

【解决方案2】：

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

<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>

【讨论】：

太好了，如果您自己编写 CSS 样式，这个原则也适用于引导程序之外的东西。谢谢！

【解决方案3】：

只需添加关注 css classs

  .dropdown-menu-width {
      width: 689px !important //your required width
    }

和htmlsn-p 如下所示

<div class="container">
    <button class="dropdown-toggle btn-block" data-toggle="dropdown">
      dropdown
    </button>
    <div class="dropdown-menu dropdown-menu-width">
      <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>

Live Preview

希望它能解决你的问题！！

【讨论】：

我不想给定一个固定的宽度我希望当页面调整大小时宽度是动态的，并且宽度应该与它的父宽度相同
动态调整大小，您需要编写媒体查询。这样你就可以实现你想要的

【解决方案4】：

您可以将min-width: 100% 添加到dropdown-menu 类中

【讨论】：