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

本文介绍了如何在bootstrap 4中使下拉菜单的宽度等于其父菜单的宽度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在引导程序4中创建一个下拉菜单.我将 dropdown-toggle按钮和 dropdown-menu 放在了一个class ="container"的 div元素中; 我希望下拉切换和下拉菜单采用其父元素的完整宽度.我为此写了这段代码

I am creating a dropdown in bootstrap 4. I placed the dropdown-toggle button and dropdown-menu in a div element with class="container" I want the dropdown toggle and dropdown-menu to take full width of its parent element. I wrote this code for that

<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;属性，但是工作不正常)

The dropdown-toggle button takes up the full width of it's parent div. But, When I clicked on dropdown-toggle button I observed that the dropdown-menu is'nt taking full width. I want the width of drop dropdown-menu to be equal to it's parent width how can I do that? (I tried to use width:inherit; property but that did'nt worked properly)

推荐答案

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

dropdown-menu has position:absolute property. So, adding width:100%; will make the dropdown-menu to take full width of the page instead of taking full width of container. To make the dropdown-menu take the width of it's parent element make the parent element's positioning relative. To solve the problem first Add class="position-relative" attribute to the parent element of dropdown-menu. Now add w-100 to the class attribute of the dropdown-menu 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>

这篇关于如何在bootstrap 4中使下拉菜单的宽度等于其父菜单的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

DropDown