文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在引导4中使下拉菜单的宽度与其父菜单的宽度相等

问如何在引导4中使下拉菜单的宽度与其父菜单的宽度相等
EN

Stack Overflow用户

提问于 2018-09-09 08:30:31

回答 3查看 4.1K关注 0票数 5

我在引导4中创建了一个下拉菜单。我将下拉按钮和下拉菜单放在一个带有class=“容器”的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>

下拉切换按钮占用它的父div的全部宽度。但是，当我点击下拉切换按钮时，我注意到下拉菜单并不是完全宽度。我希望下拉菜单的宽度等于它的父级宽度，我该怎么做呢？(我试着使用宽度:inherit；property，但它没有正常工作)

bootstrap-4

html

css

回答 3

Stack Overflow用户

回答已采纳

发布于 2018-09-09 12:22:12

下拉菜单具有position:absolute属性。因此，添加width:100%;将使下拉菜单获得页面的全部宽度，而不是容器的全部宽度。要使下拉菜单获得其父元素的宽度，则使父元素的位置相对。为了解决这个问题，首先向下拉菜单的父元素添加class="position-relative"属性。现在将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>

票数 1

Stack Overflow用户

发布于 2018-09-09 11:36:58

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

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

另见：如何使引导带4全宽下拉式在纳瓦？

票数 4

Stack Overflow用户

发布于 2018-09-09 09:35:05

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

票数 -1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/52242706

复制

相似问题

问如何在引导4中使下拉菜单的宽度与其父菜单的宽度相等
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在引导4中使下拉菜单的宽度与其父菜单的宽度相等EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在引导4中使下拉菜单的宽度与其父菜单的宽度相等
EN