首页 文章

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

提问于
浏览 次
2

我在bootstrap 4中创建了一个下拉列表 . 我将下拉切换按钮和下拉菜单放在div元素中，类为"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>
    <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>

下拉切换按钮占据整个宽度's parent div. But, When I clicked on dropdown-toggle button I observed that the dropdown-menu is' nt占据全宽 . 我希望drop dropdown-menu的宽度等于它的父宽度我该怎么办呢？ （我试图使用width：inherit; property但是没有正常工作）

html css html5 css3 bootstrap-4

4 回答

  • 1

    只需添加关注css classs

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

    和 html 代码如下

    <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

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

    回复于
  • 0

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

    回复于
  • 1

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

    回复于
  • -1

    下拉菜单有 position:absolute 属性 . 因此，添加 width:100%; 将使下拉菜单占据页面的整个宽度，而不是占用容器的整个宽度 . 要使下拉菜单取其相对的宽度's parent element make the parent element' s . 要解决此问题，请首先将 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>
    回复于

相关问题