Бутстрап-предупреждение в фиксированном плавающем div в верхней части страницы

У меня есть веб-приложение, которое использует загрузку (2.3.2 - корпоративная политика, мы не можем обновить до 3.0 без большого количества тестирования в нескольких веб-приложениях). У нас есть несколько длинных страниц в этом приложении, которые требуют проверки форм и таблиц. Однако из-за практических и эстетических причин нам нужно, чтобы предупреждающее сообщение отображалось как плавающий div в верхней части страницы.

Это будет фиксированный плавающий div, который может быть показан и скрыт с помощью javascript по мере необходимости. Эта часть работает, и я могу управлять этим div, всякий раз, когда мне нужно вывести некоторую информацию пользователю или произошла некоторая ошибка.

Макет выглядит так:

<div id="message">
    <div id="inner-message" class="alert alert-error">
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        test error message
    </div>
</div>

Стиль ниже:

#message {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}
#inner-message {
    margin: 0 auto;
}

#message div ведет себя хорошо и хорошо, но когда я пытаюсь добавить добавление в div #message (чтобы попытаться получить некоторое пространство между краем страницы и div, т.е. padding: 5px), div только получает отступы слева и сверху, а остальная часть div выталкивается слишком далеко вправо от страницы (скрывая часть "x" внутри предупреждения бутстрапа).

Кто-нибудь испытал это раньше? Это кажется довольно простой проблемой, так что я что-то не замечаю?

Ответ 1

Просто оберните свое внутреннее сообщение внутри div, на который вы примените свое дополнение: http://jsfiddle.net/Ez9C4/

<div id="message">
    <div style="padding: 5px;">
        <div id="inner-message" class="alert alert-error">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            test error message
        </div>
    </div>
</div>

Ответ 2

Если вы хотите, чтобы предупреждение было зафиксировано в верхней части, и вы используете bootstrap navbar navbar-fixed-top, следующий класс стиля будет накладываться на них предупреждением сверху навигатора:

.alert-fixed {
    position:fixed; 
    top: 0px; 
    left: 0px; 
    width: 100%;
    z-index:9999; 
    border-radius:0px
}

Это работало хорошо для меня, чтобы предоставлять предупреждения, даже когда пользователь прокручивается вниз на странице.

Ответ 3

Я думаю, проблема в том, что вам нужно обернуть ваш div в контейнер и/или строку.

Это должно быть похоже на то, что вы ищете:

<div class="container">
    <div class="row" id="error-container">
         <div class="span12">  
             <div class="alert alert-error">
                <button type="button" class="close" data-dismiss="alert">×</button>
                 test error message
             </div>
         </div>
    </div>
</div>

CSS

#error-container {
     margin-top:10px;
     position: fixed;
}

Демо-версия Bootply

Ответ 4

Другие предлагают обертывание div, но вы должны быть в состоянии сделать это, не добавляя сложности в свой html...

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

#message {
  box-sizing: border-box;
  padding: 8px;
}

Ответ 5

Простейшим подходом было бы использовать любые из этих утилит класса, которые предоставляет Bootstrap:

<div class="position-fixed">...</div>
<div class="position-sticky">...</div>
<div class="fixed-top">...</div>
<div class="fixed-bottom">...</div>
<div class="sticky-top">...</div>

https://getbootstrap.com/docs/4.0/utilities/position

Ответ 6

Вы можете использовать этот класс: class="sticky-top alert alert-dismissible"

Ответ 7

Просто хотел выбросить этот вопрос, если ни один из приведенных выше ответов не работает для вас. Если вы пытаетесь применить эффект анимации CSS3 к родительскому элементу, который оборачивается вокруг вашего "липкого" элемента BS4, это не сработает.

Я могу видеть, выполнив простой поиск, это относится к стеку.

Мой первоначальный мыслительный процесс заключается в том, что после завершения анимации CSS3 используйте javascript, чтобы удалить этот класс из родительского элемента, чтобы sticky-jr мог выполнять свою работу.

Надеюсь, что это помогает кому-то разочарование