Уменьшение высоты навигационной панели bootstrap 3.0
Я пытаюсь уменьшить высоту навигационной панели bootstrap 3.0, которая используется с фиксированным верхним поведением. Здесь я использую код.
HTML
<div class="tnav">
<div class="navbar navbar-fixed-top" role="banner">
<div class="navbar-inner-sm">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<nav class="collapse navbar-collapse" role="navigation">
<ul class="nav navbar-nav pull-right">
<li class="active">
<a href="../getting-started">Getting started</a>
</li>
<li>
<a href="../css">Ext01</a>
</li>
<li>
<a href="../components">Language</a>
</li>
<li>
<a href="../javascript">My Account</a>
</li>
<li>
<a href="../customize">Sign Out</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
CSS
.tnav .navbar { background:#F06; height:30px; }
.navbar-inner-sm{background-color: #282828;padding: 1px 20px;background-repeat: repeat-x;-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1);-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1);box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1);background-image: linear-gradient(top, #333333, #222222);}
.navbar-inner-sm .nav {position: relative;left: 0;display: block;float: left;margin: 0 10px 0 0;}
.navbar-inner-sm .nav.pull-right {float: right;}
.navbar-inner-sm .nav > li {display: block;float: left;}
.navbar-inner-sm .nav > li > a {float: none;padding: 4px 5px;line-height: 19px;color: #999999;text-decoration: none;text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);}
.navbar-inner-sm .nav > li > a:hover {background-color: transparent;color: #ffffff;text-decoration: none;}
.navbar-inner-sm .nav .active > a,.navbar .nav .active > a:hover {color: #ffffff;text-decoration: none;background-color: #003753;}
.navbar-inner-sm .divider-vertical {height: 27px;width: 1px;margin: 0 9px;overflow: hidden;background-color: #282828;border-left: 1px solid #3f3f3f; border-right: 1px solid #161616;}
.navbar-inner-sm .nav.pull-right {margin-left: 10px;margin-right: 0;}
результат
С экрана он показывает, что навигационная панель уменьшилась в выходе, но высота не уменьшилась. оригинальная высота показана в розовом цвете.
выше CSS скрипт почти хорошо работает в bootstrap 2.*
есть ли способ уменьшить высоту правильно.
10 ответов:
после нескольких часов, добавив следующий класс 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>
рабочего раствора:
Bootstrap 3.0 по умолчанию имеет заполнение 15px сверху и снизу, поэтому нам просто нужно переопределить его!
например:
.navbar-nav > li > a {padding-top:10px !important; padding-bottom:10px !important;} .navbar {min-height:40px !important}
просто переопределите минимальный набор высоты .как поставлю так:
.navbar{ min-height:20px; //* or whatever height you require }изменение высоты элементов на что-то меньшее, чем минимальная высота, не будет иметь значения...
Если вы используете источник less, должна быть переменная для высоты навигационной панели в . Если вы не используете источник, то вы можете настроить его с помощью настройка утилиты, которые предоставляет сайт bootstrap. А затем вы можете загрузить его и включить в свой проект. Переменная, которую вы ищете:
@navbar-height
Это мой опыт
.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;}
единственный способ, который работал для меня объясняется по этой ссылке: Как уменьшить высоту навигационной панели в Bootstrap 3?
уменьшается высота панели навигации с помощью всего двух строк кода
Если вы, ребята, генерируете свои таблицы стилей с меньшим/SASS и импортируете туда Bootstrap, я обнаружил, что переопределение переменной @navbar-height позволяет вам установить высоту navbar, которая изначально определена в переменных.меньше файлов.
Я думаю, что мы можем написать это меньше стилей, не меняя существующий цвет. Следующие работал для меня (в 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') на самом деле нужен, только если у вас есть текст в качестве названия вашего "бренда".
хотел добавлены мои 2 пенса и спасибо Джеймсу Poulose за его оригинальный ответ, это было единственное, что работал для моего конкретного проекта (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');Примечание: если вы вытаскиваете несколько файлов, вам нужно убедиться, что они загружаются в правильном порядке.
надеюсь, это кому-то поможет.
У меня такая же проблема, высота моей строки меню, предоставленной bootstrap, была слишком большой, на самом деле я загрузил какой-то неправильный bootstrap, наконец, избавился от него, загрузив исходный bootstrap с этого сайта.. http://getbootstrap.com/2.3.2/ хотите использовать bootstrap в yii (netbeans) следуйте этому руководству, https://www.youtube.com/watch?v=XH_qG8gphaw... голос отсутствует, но шаги медленные вы можете легко понять и реализовать их. Спасибо