Предотвратить перемещение флэш-сообщений ниже контейнера вниз - PullRequest
Новая
       11

Предотвратить перемещение флэш-сообщений ниже контейнера вниз

0 голосов
/ 01 ноября 2019

Я создаю веб-приложение с Bootstrap 4. Пользователь уведомляется с alerts. Я следовал указаниям здесь .

К сожалению, содержимое под предупреждением перемещается вниз, когда отображается alert и вверх, после того, как предупреждение отклонено. alert должен просто перемещаться по контенту, а не перемещать его. 

<body>
  <div class="container">
  <div class="alert alert-info alert-dismissible fade show" role="alert">
    My alert message
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  </div>
  <div class="container">
   <h1>My title</h1>
  </div>
</body>

1 Ответ

0 голосов
/ 01 ноября 2019

Вот один из способов ...

HTML 

<body>
    <div class="container alert-container">
        <div class="alert alert-info alert-dismissible fade show" role="alert">
            My alert message
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
        </div>
    </div>
    <div class="container">
        <h1>My title</h1>
    </div>
</body>

CSS 

.alert-container {
  position: relative;
}

.alert {
  position: absolute;
}

УведомлениеЯ добавил класс alert-container в первый контейнер (вы можете использовать другое имя класса, если хотите).

...