带有z-index的Bootstrap容器不能保持隐藏状态

Question

我在试图解决一个Bootstrap容器的问题时遇到了一点困难，我试图用jQuery来隐藏这个容器。由于某些原因，当我用jQuery隐藏了一个Bootstrap容器后 fadeOut() 执行， <div> 返回到屏幕上，而不是保持隐藏。我的代码如下。

CSS。

.container-fluid
  {
    background-color: black;
    z-index: 1;
    display: flex;
    position: absolute;
  }

jQuery。

$(function () {
  $( "#btn_entrar" ).click(function() {
  $( "#entrar" ).fadeOut( "slow");
});

HTML。

    <div id="entrar" class="container-fluid h-100 d-flex flex-column">
      <div class="row my-auto">
        <table class="table table-image">
          <tr>
            <td><img class="img-fluid" src="/img/TlmI1dedo512.jpg"></td>
            <td><img class="img-fluid" src="/img/TlmI2dedos512.jpg"></td>
          </tr>
          <tr>
            <td><img class="img-fluid" src="/img/TlmIRodar512.jpg"></td>
            <td><img class="img-fluid" src="/img/TlmGiroscopio512.gif"></td>
          </tr>
        </table>
      </div>
    </div>

我试了好几种方法，但到现在都没有效果，谁能帮帮我？谢谢。

Answer 1

对我来说，这也能正常工作，刚才在JSFiddle上试了一下。[https:/jsfiddle.net17erftug14][Fiddle] 。

我所做的唯一一件事就是删除 $(function() { bc.

$('#someID').click(function() {
// yourCode here
});

已经触发了一个函数。

你在你的控制台中得到任何错误或什么？

Answer 2

刚刚修复了不稳定的行为，只要我从div容器中删除 "d-flex"，它就开始工作，如预期的那样。谢谢你