Как установить ширину всплывающего уведомления Bootstrap 4?

У меня есть страница с тостом Bootstrap 4, где я установил положение тоста как postion: fixed. Вся часть тоста выглядит так:

<div class = "container mt-5">
  <button type = "button" class = "btn btn-primary" id = "liveToastBtn">Toast it</button>
  <div id = "toastContainer" style = "position: fixed; top: 1.5vw; right: 1vw; bottom: 4.5vw; z-index: 9;">
    <div class = "toast show" 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>11 mins 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">
        Hello, world! This is a toast message.
      </div>
    </div>
  </div>
</div>

Полный рабочий код вы найдете в этом JSFiddle.

Работает отлично, как есть, но теперь я хочу установить ширину всплывающего уведомления примерно на 50% от окна просмотра. В строке <div id = "toastContainer"...> я попытался установить свойство width:

  <div id = "toastContainer" style = "position: fixed; top: 1.5vw; width: 50%; right: 1vw; bottom: 4.5vw; z-index: 9;">

и в качестве альтернативы я попробовал установить left:

  <div id = "toastContainer" style = "position: fixed; top: 1.5vw; left: 50%; right: 1vw; bottom: 4.5vw; z-index: 9;">

но в обоих случаях ширина появляющегося тоста не меняется (только его горизонтальное положение).

Как я могу установить ширину этого всплывающего уведомления Bootstrap 4?

css twitter-bootstrap bootstrap-4 css-position width

12.04.2024 04:36

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

181

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Я нашел путь.

Я не знаю, знакомы ли вы с бутстрапом, но есть вещи, которые позволяют вам «контролировать» длину элементов, помещая объект с class = "col-x" (x между 1-12) внутри div с class = "row".

<div class = "row">
   <button type = "button" class = "btn btn-primary col-8" id = "liveToastBtn">Toast it</button>
</div>

Как вы можете видеть, это то, что я сделал, просто добавьте столбец 8 внутри класса кнопки, вы можете изменить его, но я обнаружил, что 6 не выглядит как 50%, 8 ближе.

Затем вам понадобится немного CSS, чтобы центрировать кнопку:

.row {
   display: flex;
   justify-content: center;
}

12.04.2024 05:15

Ответ принят как подходящий

Проблема возникает из-за того, что max-width применяется к .toast, вы можете unset это сделать.

Затем вы можете установить width: 50vw; на #toastContainer (или .toast).

const toastEl = document.querySelector('.toast');
let toast = new bootstrap.Toast(toastEl, {
  autohide: false
})
const toastButton = document.getElementById("liveToastBtn")
toastButton.addEventListener("click", function() {
  console.info("Button was clicked!");
  toast.show()
});

#toastContainer {
  width: 50vw;
}

#toastContainer .toast {
  max-width: unset;
}

<link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

<div class = "container mt-5">
  <button type = "button" class = "btn btn-primary" id = "liveToastBtn">Toast it</button>
  <div id = "toastContainer" style = "position: fixed; top: 1.5vw; right: 1vw; bottom: 4.5vw; z-index: 9;">
    <div class = "toast hide" role = "alert" aria-live = "assertive" aria-atomic = "true">
      <div class = "toast-header">
        <strong class = "mr-auto">Bootstrap</strong>
        <small>11 mins 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">
        Hello, world! This is a toast message.
      </div>
    </div>
  </div>
</div>

<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

Он работает отлично. Ты мой герой!

— 18.04.2024 03:48

16.04.2024 09:46