Question

我在bootstrap 4中遇到一个奇怪的问题，使用下拉列表我在下拉列表中列出了一些更多的操作，当我点击＆＃34;加上图标＆＃34;但当我点击＆＃34;加上图标＆＃34;我的下拉列表隐藏在行后面我已经查看了各种修复方法，但没有任何方法可以帮助我。大多数问题都与导航栏中的下拉菜单有关，但这不是我的情况。在这里我也尝试了这些解决方案，但问题仍然存在。

我的代码如下

PS： - 因为代码很长，所以在这里我只附加一个原始代码实例，请参阅pen

非常感谢您提前帮助我！：）

问题

HTML

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-4 gallery-gutter-fix zindex-fix">
    <div class="gallery-img-wrapper-3">
        <a href="#" class="d-block h-100">
            <img class="thumbnail-basic_372 mx-auto"
                 src="https://vignette.wikia.nocookie.net/thementalist/images/e/ea/Jane-patrick-jane-32078790-457-535.jpg/revision/latest?cb=20150414045955"
                 alt="some text">
        </a>
        <div class="after-overlay">
            <div class="d-flex flex-wrapper align-items-center">
                <div class="d-flex mr-auto">
                    <div class="d-flex justify-content-end align-items-center">
                        <div class="dropdown">
                                        <span data-toggle="dropdown">
                                            <i class="fas fa-plus-circle"></i>
                                        </span>
                            <div class="dropdown-menu">
                                <div class="d-block w-100">
                                    <h4 class="text-uppercase">Add To</h4>
                                </div>
                                <div class="custom-filled-checkbox w-100">
                                    <label for="morning1">
                                        <input id="morning1" name="morning1" type="checkbox">
                                        <i class="helper"></i>Morning
                                    </label>
                                </div>
                                <div class="custom-filled-checkbox w-100">
                                    <label for="evening1">
                                        <input id="evening1" name="evening1" type="checkbox">
                                        <i class="helper"></i>Evening
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="d-flex">
                    <h6 class="text-uppercase">some name</h6>
                </div>
                <div class="d-flex ml-auto">
                    <div class="d-flex justify-content-end align-items-center">
                        <i class="far fa-heart"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</div>

CSS

$base-gradient-light:rgba(94, 53, 177,0.6);
$white: #fff;
.search-cover-basic {
  .gallery_wrapper {
    padding-bottom: 8px;
    padding-top: 8px;
  }
}

/*custom gutter for gallery*/
.row {
  .gallery-gutter-fix {
    padding-right: 8px;
    padding-left: 8px;
  }
}
.zindex-fix {
  z-index: 99;
}
.gallery-img-wrapper {
  border: 1px solid #DDDEDF;
  border-radius: 0.25rem;
  height: 150px;
  /*only when you need images with gradient overlay*/
  &.overlay-gradient {
    position: relative;
  }
  .after-overlay {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 50px;
    display: none;
    color: $white;
    a {
      color: $white;
      text-decoration: none;
    }
    //dropdown menus for add to playlist
  }
  &:hover {
    .after-overlay {
      display: block;
      background: $base-gradient-light;
      font-weight: bold;
      .flex-wrapper {
        padding: 5px 15px;
        height: 100%;
      }
      h6 {
        font-weight: bold;
        margin-bottom: 0.1rem;
      }
    }
  }
  /*only when you need images with gradient overlay ends*/
  .thumbnail-basic {
    object-fit: cover;
    width: 100%; /*change from 150px to 100%*/
    height: 149px;
    display: block;
    max-width: 100%;
    /*in case you need to fix portrait images*/
    &.portrait {
      object-fit: contain;
    }
  }
}
.gallery-img-wrapper-3 {
  border: 1px solid #DDDEDF;
  border-radius: 0.25rem;
  height: 372px;
  a {
    color: $white;
    text-decoration: none;
  }
  /*only when you need images with gradient overlay*/
  &.overlay-gradient {
    position: relative;
  }
  .after-overlay {
    position: relative;
    bottom: 48px;
    left: 0;
    width: 100%;
    height: 50px;
    display: none;
    color: $white;
    .dropdown-menu {
      padding:18px 12px;
      opacity:1 !important;
      z-index: 10000;
    }
  }
  .after-overlay {
    display: block;
    background: $base-gradient-light;
    font-weight: bold;
    .flex-wrapper {
      padding: 5px 15px;
      height: 100%;
    }
    h6 {
      font-weight: bold;
      margin-bottom: 0.1rem;
    }
  }
  /*only when you need images with gradient overlay ends*/

  .thumbnail-basic_372 {
    object-fit: cover;
    width: 100%; /*change from 150px to 100%*/
    height: 372px;
    display: block;
    max-width: 100%;
    /*in case you need to fix portrait images*/
    &.portrait {
      object-fit: contain;
    }
  }
}

Answer 1

感谢Pete，因为他发现造成这一混乱的原因。

导致此问题的是我的.zindex-fix类

.zindex-fix {
  z-index: 99;
}

所以我删除了上面的课程，现在工作正常！

证明它see here

在bootstrap 4行后面的下拉剪报

1 个答案: