Все предыдущие решения тем или иным образом жестко кодируют 40 пикселей специально в HTML или CSS. Что, если навигационная панель содержит другой размер шрифта или изображение? Что делать , если у меня есть хорошая причина не возиться с телом дополнения в первую очередь? Я искал решение этой проблемы, и вот что я придумал:
$(document).ready(function(){
$('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height()) + 1 )+'px'});
$(window).resize(function(){
$('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height()) + 1 )+'px'});
});
Вы можете переместить его вверх или вниз, отрегулировав «1». Кажется, это работает для меня независимо от размера содержимого в панели навигации, до и после изменения размера.
Мне интересно, что другие думают по этому поводу: пожалуйста, поделитесь своими мыслями. (Кстати, это будет рефакторинг, чтобы не повторяться.) Помимо использования jQuery, есть ли другие причины не подходить к проблеме таким образом? У меня даже есть это работает со вторым navbar, как это:
$('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height())
+ $('.admin-nav').height() + 1 )+'px'});
PS: Выше приведен Bootstrap 2.3.2 - будет ли он работать в 3.x До тех пор, пока остаются общие имена классов ... фактически, он должен работать независимо от начальной загрузки, верно?
РЕДАКТИРОВАТЬ: Вот полная функция jquery, которая обрабатывает две сложенные, отзывчивые фиксированные панели навигации динамического размера. Требуются 3 HTML-класса (или могут использоваться идентификаторы): user-top, admin-top и contentwrap:
$(document).ready(function(){
$('.admin-top').css({'margin-top':($('.user-top').height()+0)+'px'});
$('.contentwrap') .css({'padding-top': (
$('.user-top').height()
+ $('.admin-top').height()
+ 0 )+'px'
});
$(window).resize(function(){
$('.admin-top').css({'margin-top':($('.user-top').height()+0)+'px'});
$('.contentwrap') .css({'padding-top': (
$('.user-top').height()
+ $('.admin-top').height()
+ 0 )+'px'
});
});