Изменение высоты navbar в Bootstrap3

Я пытаюсь уменьшить высоту Bootstrap3исправлена navbar. Я нашел @navbar-height переменной в переменную. меньше, и изменил его, но, похоже, это ничего не меняет. Я также пробую эти решения:" изменить высоту navbar","изменение высоты Navbar". Никакой результат.

есть идеи?

спасибо

8
css twitter-bootstrap twitter-bootstrap-3

2 ответов

обновление

согласно ответу на https://github.com/twbs/bootstrap/issues/11443 @mdo написал:

изменить @navbar-height и @navbar-padding-vertical и вы должны получить его.

пример, set @navbar-height: 20px; и @navbar-padding-vertical: 0; см.: http://bootply.com/100604

обратите внимание, что это не устанавливает высоту .navbar-form элементов

обновления

в сама navbar не имеет определенной ширины. Причина Bootstrap использовать граница-box модель, высота установлена самым высоким элементом внутри ее.

обратите внимание, что navbar будет иметь минимальную высоту (по умолчанию установлено значение 50px высота панели навигации). @navbar-высота в navbar.меньше устанавливает эту минимальную высоту.

также прочитайте его комментарии:

/ / убедитесь, что панель навигации всегда отображается (например, без a .шапку-бренд в свернутом режиме)

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

.navbar-бренд

The .navbar-класс бренда получил высоту 50px. Определяются перетяжка 15px + a line-высота 20px;. (2 x 15 + 20 = 50).

высота линии устанавливается в navbar.меньше тоже по @line-height-computed. С помощью @line-height-computed, определенного в переменных.меньше floor(@font-size-base * @line-height-base); // ~20px

@line-height-computed также будет использоваться в формах, навигации и т. д. так изменить его и перекомпиляция Bootstrap не только повлияет на ваш navbar.

вышеуказанное делает невозможным установить вашу высоту navbar С меньше.

заполнение определяется navbar-padding-vertical но эти переменные не используются для установки заполнения ссылок navbar (.navbar-nav > li > a)

используйте css для управления высотой строки (таким образом, размер шрифта) и заполнением .navbar-бренд для изменения его высоты и поэтому высоты navbar.

.navbar-навигатор > li > а

The .navbar-nav > li > класс, ссылки в вашем navbar также определяет высота 50px (прокладка 15 снизу / сверху) и линия-высота 20x снова. Обратите внимание на заполнение первого набора на 10 ПКС жесткий код в панели навигации.меньше и перезаписано ((@navbar-height - @line-height-computed) / 2) (более высокий приоритет) для @media (min-width: @grid-float-breakpoint)

также в этом случае высота линии ссылок будет установлена с помощью @линия-высота-компьютерная.

другие элементы

также элемент, как формы, выпадающее меню будет иметь рассчитанная высота.

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

см. также:https://github.com/twbs/bootstrap/issues/11443 и https://github.com/twbs/bootstrap/issues/11444

21
.navbar {
    padding: 0;
    transition: background 0.5s ease-in-out 0s, padding 0.5s ease-in-out 0s;
}
.navbar-brand {
    float: left;
    font-size: 18px;
    height: 10px;
    line-height: 2px;
    padding: 2px;
}

он должен переопределить прокрутку-nav.в CSS

1