Уменьшение высоты бутстрапа 3.0 navbar

Ответ 1

Проведя несколько часов, добавив следующий класс css, исправил мою проблему.

Работа с Bootstrap 3.0. *

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

Работа с Bootstrap 3.3.4

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

Обновление Полный код для настройки и уменьшения высоты навигатора с помощью скриншота.

CSS

/* navbar */
.navbar-primary .navbar { background:#9f58b5; border-bottom:none; }
.navbar-primary .navbar .nav > li > a {color: #501762;}
.navbar-primary .navbar .nav > li > a:hover {color: #fff; background-color: #8e49a3;}
.navbar-primary .navbar .nav .active > a,.navbar .nav .active > a:hover {color: #fff; background-color: #501762;}
.navbar-primary .navbar .nav li > a .caret, .tnav .navbar .nav li > a:hover .caret {border-top-color: #fff;border-bottom-color: #fff;}
.navbar-primary .navbar .nav > li.dropdown.open.active > a:hover {}
.navbar-primary .navbar .nav > li.dropdown.open > a {color: #fff;background-color: #9f58b5;border-color: #fff;}
.navbar-primary .navbar .nav > li.dropdown.open.active > a:hover .caret, .tnav .navbar .nav > li.dropdown.open > a .caret {border-top-color: #fff;}
.navbar-primary .navbar .navbar-brand {color:#fff;}
.navbar-primary .navbar .nav.pull-right {margin-left: 10px; margin-right: 0;}
.navbar-xs .navbar-primary .navbar { min-height:28px; height: 28px; }
.navbar-xs .navbar-primary .navbar .navbar-brand{ padding: 0px 12px;font-size: 16px;line-height: 28px; }
.navbar-xs .navbar-primary .navbar .navbar-nav > li > a {  padding-top: 0px; padding-bottom: 0px; line-height: 28px; }
.navbar-sm .navbar-primary .navbar { min-height:40px; height: 40px; }
.navbar-sm .navbar-primary .navbar .navbar-brand{ padding: 0px 12px;font-size: 16px;line-height: 40px; }
.navbar-sm .navbar-primary .navbar .navbar-nav > li > a {  padding-top: 0px; padding-bottom: 0px; line-height: 40px; }

Код использования:

<div class="navbar-xs">
   <div class="navbar-primary">
       <nav class="navbar navbar-static-top" role="navigation">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-8">
                 <span class="sr-only">Toggle navigation</span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#">Brand</a>
          </div>
          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-8">
              <ul class="nav navbar-nav">
                  <li class="active"><a href="#">Home</a></li>
                  <li><a href="#">Link</a></li>
                   <li><a href="#">Link</a></li>
              </ul>
          </div><!-- /.navbar-collapse -->
      </nav>
  </div>
</div>

Ответ 2

Рабочее решение:

Bootstrap 3.0 по умолчанию имеет дополнение 15px сверху и снизу, поэтому нам просто нужно переопределить его!

Например:

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

Ответ 3

Просто переопределите минимальную высоту, установленную в .navbar следующим образом:

.navbar{
  min-height:20px; //* or whatever height you require
}

Изменение высоты элементов к чему-то меньшему, чем минимальная высота, не будет иметь значения...

Ответ 4

Если вы используете меньший источник, должна быть переменная для высоты навигатора в файле variables.less. Если вы не используете источник, вы можете настроить его с помощью утилиты customize, которую предоставляет сайт начальной загрузки. А затем вы можете загрузить его и включить в свой проект. Переменная, которую вы ищете, это: @navbar-height

Ответ 5

Это мой опыт

 .navbar { min-height:38px;   }
 .navbar .navbar-brand{ padding: 0 12px;font-size: 16px;line-height: 38px;height: 38px; }
 .navbar .navbar-nav > li > a {  padding-top: 0px; padding-bottom: 0px; line-height: 38px; }
 .navbar .navbar-toggle {  margin-top: 3px; margin-bottom: 0px; padding: 8px 9px; }
 .navbar .navbar-form { margin-top: 2px; margin-bottom: 0px }
 .navbar .navbar-collapse {border-color: #A40303;}

Ответ 6

Единственный способ, который работал у меня, объясняется по этой ссылке: Как вы уменьшаете высоту навигатора в Bootstrap 3?

Уменьшает высоту навигатора только с двумя строками кода

Ответ 7

Если вы, ребята, генерируете свои таблицы стилей с помощью LESS/SASS и импортируете Bootstrap, я обнаружил, что переопределение переменной @navbar-height позволяет установить высоту навигатора, которая изначально определена в переменных. файл.

Ответ 8

Я думаю, что мы можем написать это меньшее количество стилей, не меняя существующий цвет. Следующие работали для меня (в Bootstrap 3.2.0)

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

Последний ( "navbar-brand" ) на самом деле нужен, только если у вас есть текст в качестве вашего названия бренда.

Ответ 9

Хотел добавить 2 пенса и спасибо Джеймсу Полосе за его оригинальный ответ, это был единственный, который работал для моего конкретного проекта (MVC 5 с последней версией Bootstrap 3).

Это в основном предназначено для новичков, для ясности и для облегчения будущих изменений. Я предлагаю вам добавить раздел в нижней части вашего CSS файла для вашего проекта, например, мне нравится делать это:

/* Bootstrap overrides */

.some-class-here {
}

Принимая ответ Джеймса Полозе выше, я сделал это:

/* Bootstrap overrides */   
.navbar-nav > li > a { padding-top: 8px !important; padding-bottom: 5px !important; }
.navbar { min-height: 32px !important; }
.navbar-brand { padding-top: 8px; padding-bottom: 10px; padding-left: 10px; }

Я изменил значения padding-top, чтобы наложить текст на мой элемент navbar. Вы можете в значительной степени переопределить любой элемент Bootstrap, как этот, и его хороший способ внести изменения, не забивая базовые классы Boostrap, потому что последнее, что вы хотите сделать, это внести изменения, а затем потерять их, когда вы обновили Bootstrap!

Наконец, для еще большего разделения мне нравится разделить мои файлы CSS и использовать объявления @import для импорта ваших подфайлов в один основной файл CSS для упрощения управления, например:

@import url('css/mysubcssfile.css');

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

Надеюсь, это поможет кому-то.

Ответ 10

У меня та же проблема, высота моей панели меню, предоставляемой бутстрапом, была слишком большой, на самом деле я загрузил неправильную загрузку, наконец, избавился от нее, загрузив исходный бутстрап с этого сайта.. http://getbootstrap.com/2.3.2/  хотите использовать bootstrap в yii (netbeans), следуйте этому руководству, https://www.youtube.com/watch?v=XH_qG8gphaw... Голоса нет, но шаги медленны, вы можете легко их понять и реализовать. Благодаря