Как сделать несколько загрузочных тостов выровненными в виде сетки?

Question

Как сделать несколько Bootstrap Toast как рядом и сверху вниз?

Ссылка для справки: https://getbootstrap.com/docs/4.2/components/toasts/

<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">

<!-- Then put toasts within -->
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">just now</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    See? Just like this.
  </div>
</div>

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">2 seconds ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Heads up, toasts will stack automatically
  </div>
</div>

Answer 1

Как объясняется в документации по Bootstrap:

"Размещайте тосты с помощью пользовательского CSS по мере необходимости ... вы также можете использовать утилиты flexbox для выравнивания тостов по горизонтали и / или по вертикали"

Таким образом, вы можете поместить тосты внутри абсолютно гибкого div-бокса.Например, вот выровненные по правому краю сложенные тосты ...

<div class="position-absolute w-100 d-flex flex-column align-items-end">
    <div class="w-25">
        <div class="toast ml-auto" role="alert" data-delay="1000" data-autohide="true">
            ...
        </div>
        <div class="toast ml-auto" role="alert" data-delay="3000" data-autohide="true">
            ...
        </div>
        <div class="toast ml-auto" role="alert" data-delay="5000" data-autohide="true">
            ...
        </div>
    </div>
</div>

Существует множество вариантов макета с flexbox:

По вертикали: https://www.codeply.com/go/3ZvZa9b8Im
Рядом:https://www.codeply.com/go/GFMde2ritI
Сетка 3х3: https://www.codeply.com/go/lj8GTFjvuK

Answer 2

проверить это

<style>
#toast-container toast { width: 33%; }
</style>
<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;" id="toast-container" class="d-flex flex-wrap">
    <!-- Then put toasts within -->
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
            <img src="..." class="rounded mr-2" alt="...">
            <strong class="mr-auto">Bootstrap</strong>
            <small class="text-muted">just now</small>
            <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="toast-body">
            See? Just like this.
        </div>
    </div>
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
            <img src="..." class="rounded mr-2" alt="...">
            <strong class="mr-auto">Bootstrap</strong>
            <small class="text-muted">2 seconds ago</small>
            <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="toast-body">
            Heads up, toasts will stack automatically
        </div>
    </div>
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
            <img src="..." class="rounded mr-2" alt="...">
            <strong class="mr-auto">Bootstrap</strong>
            <small class="text-muted">2 seconds ago</small>
            <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="toast-body">
            Heads up, toasts will stack automatically
        </div>
    </div>
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
            <img src="..." class="rounded mr-2" alt="...">
            <strong class="mr-auto">Bootstrap</strong>
            <small class="text-muted">2 seconds ago</small>
            <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="toast-body">
            Heads up, toasts will stack automatically
        </div>
    </div>
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
            <img src="..." class="rounded mr-2" alt="...">
            <strong class="mr-auto">Bootstrap</strong>
            <small class="text-muted">2 seconds ago</small>
            <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="toast-body">
            Heads up, toasts will stack automatically
        </div>
    </div>
</div>