У меня есть веб-приложение, которое использует загрузку (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">×</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" внутри предупреждения бутстрапа).
Кто-нибудь испытал это раньше? Это кажется довольно простой проблемой, так что я что-то не замечаю?
Просто оберните свое внутреннее сообщение внутри 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">×</button>
test error message
</div>
</div>
</div>
Если вы хотите, чтобы предупреждение было зафиксировано в верхней части, и вы используете bootstrap navbar navbar-fixed-top, следующий класс стиля будет накладываться на них предупреждением сверху навигатора:
.alert-fixed {
position:fixed;
top: 0px;
left: 0px;
width: 100%;
z-index:9999;
border-radius:0px
}
Это работало хорошо для меня, чтобы предоставлять предупреждения, даже когда пользователь прокручивается вниз на странице.
Я думаю, проблема в том, что вам нужно обернуть ваш 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;
}
Другие предлагают обертывание div, но вы должны быть в состоянии сделать это, не добавляя сложности в свой html...
проверьте это:
#message {
box-sizing: border-box;
padding: 8px;
}
Простейшим подходом было бы использовать любые из этих утилит класса, которые предоставляет 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>
Вы можете использовать этот класс: class="sticky-top alert alert-dismissible"
Просто хотел выбросить этот вопрос, если ни один из приведенных выше ответов не работает для вас. Если вы пытаетесь применить эффект анимации CSS3 к родительскому элементу, который оборачивается вокруг вашего "липкого" элемента BS4, это не сработает.
Я могу видеть, выполнив простой поиск, это относится к стеку.
Мой первоначальный мыслительный процесс заключается в том, что после завершения анимации CSS3 используйте javascript, чтобы удалить этот класс из родительского элемента, чтобы sticky-jr мог выполнять свою работу.
Надеюсь, что это помогает кому-то разочарование