Bootstrap контейнер с z-index не остается скрытым

Question

Мне немного сложно решить проблему с контейнером Bootstrap, который я пытаюсь скрыть, используя jQuery. По какой-то причине после выполнения 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>

I пробовал несколько подходов, но пока без радости, может кто-нибудь помочь? Спасибо.

Answer 1

Только что исправлено поведение errati c, как только я удалил "d-flex" из контейнера div, он начал работать, как ожидалось! Спасибо!

Answer 2

Для меня это тоже отлично работает, только что попробовал на JSFiddle: [https://jsfiddle.net/17erftug/14/] [Fiddle]

Единственное, что я сделал, это удалил $(function() { b c. $('#someID').click(function() { // yourCode here }); уже запускает функцию.

Есть ли у вас ошибки в консоли или что-то в этом роде?