Как вы уменьшаете высоту навигатора в Bootstrap 3?

Я хочу, чтобы мой navbar в BS3 был высотой 20 пикселей. Как это сделать?

Я пробовал следующее:

.tnav .navbar .container { height: 28px; }

Ничего не делал.

.navbar-fixed-top {
    height: 25px; /* Whatever you want. */
}

Появляется возможность увеличить размер панели, но не может уменьшиться.

Каков хороший способ сделать это, сохраняя выравнивание контейнера и т.д.

Ответ 1

bootstrap имел верхнее дополнение 15px и нижнее дополнение 15px на .navbar-nav > li > a, поэтому вам нужно уменьшить его, переопределив его в вашем файле css, а .navbar имеет min-height:50px; уменьшить его столько, сколько вы хотите.

например

.navbar-nav > li > a {padding-top:5px !important; padding-bottom:5px !important;}
.navbar {min-height:32px !important}

добавьте эти классы в свой css, а затем проверьте.

Ответ 2

Minder Saini пример выше почти работает, но .navbar-brand также нужно уменьшить.

Рабочий пример (используя его на моем собственном сайте) с Bootstrap 3.3.4:

.navbar-nav > li > a, .navbar-brand {
    padding-top:5px !important; padding-bottom:0 !important;
    height: 30px;
}
.navbar {min-height:30px !important;}

Изменить для мобильных устройств... Чтобы этот пример работал и на мобильных устройствах, вам нужно изменить стиль навигации на панели навигации так:

.navbar-toggle {
     padding: 0 0;
     margin-top: 7px;
     margin-bottom: 0;
}

Ответ 3

Вместо <nav class="navbar ... используйте <nav class="navbar navbar-xs...

и добавьте эти 3 строки css

.navbar-xs { min-height:28px; height: 28px; }
.navbar-xs .navbar-brand{ padding: 0px 12px;font-size: 16px;line-height: 28px; }
.navbar-xs .navbar-nav > li > a {  padding-top: 0px; padding-bottom: 0px; line-height: 28px; }

Выход:

Ответ 4

Ответ выше работал отлично (MVC5 + Bootstrap 3.0), но высота вернулась к значению по умолчанию, когда появилась кнопка navbar (очень маленький экран). Пришлось добавить ниже в мой .css, чтобы исправить это.

.navbar-header .navbar-toggle {
    margin-top:0px;
    margin-bottom:0px;
    padding-bottom:0px;
}

Ответ 5

Если у вас есть только один навигатор, и вы хотите его изменить, вы должны изменить свои переменные .less: @navbar-height (где-то рядом с строкой 265, я не могу вспомнить, сколько строк я добавил в мой).

На это ссылается mixin .navbar-vertical-align, который используется, например, для размещения элемента "toggle", всего с .navbar-form, .navbar-btn, и .navbar-text.

Если у вас есть два навигатора и вы хотите, чтобы они были разных высот, Minder Saini answer может работать достаточно хорошо, если он будет определен, например, #topnav.navbar, но следует тестировать на нескольких шинах устройства.

Ответ 6

 .navbar-nav > li > a {padding-top:7px !important; padding-bottom:7px !important;}
.navbar {min-height:32px !important;} 
.navbar-brand{padding-top:7px !important; max-height: 24px;  }
.navbar .navbar-toggle {  margin-top: 0px; margin-bottom: 0px; padding: 8px 9px; }