Высота панели навигации Twitter-Bootstrap слишком мала

Высота панели навигации по умолчанию в Twitter-Bootstrap слишком мала. Когда высота увеличивается, она вторгается в div ниже. Как увеличить высоту панели навигации, которая сдвигает всю страницу вниз? Если это возможно, как разместить ссылки на панель навигации вверху/внизу панели навигации.


css twitter-bootstrap navbar
person Gattoo    schedule 29.03.2012    source источник
comment
решено. изменил высоту в .navbar .nav добавил padding-top и дал значение   -  person Gattoo    schedule 30.03.2012
comment
опубликуйте свои результаты в качестве ответа и подтвердите его, отметив зеленую галочку, чтобы закрыть этот вопрос, таким образом, это поможет другим пользователям в будущем.   -  person Andres Ilich    schedule 02.04.2012
comment
Спасибо. Я бы хотел, чтобы кто-то другой, может быть, вы, сделать это.   -  person Gattoo    schedule 03.04.2012
comment
Связанный ответ: stackoverflow.com/a/11008050/977939   -  person jpillora    schedule 04.10.2012

Ответы (4)


arrow_upward
19
arrow_downward

Я почти уверен, что мне не нравится это решение, но оно работает за то количество времени, которое я должен потратить на это.

.navbar .container { height: 2em; }

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

edit: я только что перечитал ваш вопрос и увидел, что у вас проблемы с «divs ниже». При этом вам также необходимо настроить отступы в теге body, например.

body { padding-top: 6em; }

согласно документам Twitter Bootstrap на панели навигации:

Прикрепляя панель навигации, не забудьте учесть скрытую область под ней. Добавьте 40px или более дополнений к ‹body›. Обязательно добавьте это после основного CSS Bootstrap и перед необязательным адаптивным CSS.

person Chris    schedule 13.04.2012

arrow_upward
6
arrow_downward

Добавления такого отступа недостаточно, если вы используете адаптивный бутстрап. В этом случае, когда вы измените размер окна, вы получите зазор между верхней частью страницы и панелью навигации. Правильное решение выглядит так:

body {
  padding-top: 60px;
}
@media (max-width: 979px) {
  body {
    padding-top: 0px;
  }
}

Источник: Twitter Bootstrap - блокировка верхней панели навигации сверху содержимое страницы

person jpillora    schedule 04.10.2012

arrow_upward
1
arrow_downward

вы можете попробовать этот. он работает при любом размере дисплея.

.navbar .container { min-height: 83px; }


.navbar-fixed-top {
    position:static;
    margin-bottom:20px;
    }
person Faisal Khan Samrat    schedule 09.01.2013

arrow_upward
0
arrow_downward 

</script>

$(".dropdown-toggle").click(function () {
$(".nav-collapse").css('height', 'auto')
});

</script>

Это решило аналогичную мою проблему (подменю не появлялось из-за небольшой родительской высоты ul при первом щелчке), возможно, это сработает и для вас.

person Ceren Akın    schedule 07.08.2013