Twitter-Bootstrap navbar слишком мала - PullRequest
8 голосов
/ 29 марта 2012

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

Ответы [ 4 ]

19 голосов
/ 13 апреля 2012

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

.navbar .container { height: 2em; }

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

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

body { padding-top: 6em; }

в Документах по Bootstrap на Navbar :

прикрепите навигационную панель, не забудьте учесть скрытую область внизу.Добавьте 40px или больше от apdding к .Обязательно добавьте это после основного загрузочного CSS и до необязательного адаптивного CSS.

6 голосов
/ 04 октября 2012

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

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

Источник: Twitter Bootstrap - верхняя панель навигации, блокирующая верхний контент страницы

1 голос
/ 09 января 2013

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

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


.navbar-fixed-top {
    position:static;
    margin-bottom:20px;
    }
0 голосов
/ 07 августа 2013
</script>

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

</script>

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

...