Я пытаюсь уменьшить высоту панели навигации 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-скрипт почти хорошо работает в начальной загрузке 2. *
Есть ли способ как следует уменьшить высоту.
twitter-bootstrap
navbar
twitter-bootstrap-3
irfanmcsd
источник
источник
Ответы:
Проведя несколько часов, добавление следующего класса css устранило мою проблему.
Работа с Bootstrap 3.0. *
Работа с Bootstrap 3.3.4
Обновите полный код, чтобы настроить и уменьшить высоту навигационной панели со снимком экрана.
CSS:
Код использования:
источник
Рабочий раствор:
Bootstrap 3.0 по умолчанию имеет отступы 15 пикселей сверху и снизу, поэтому нам просто нужно его переопределить!
Например:
источник
.navbar-nav > li > a {padding-top: 15px; padding-bottom: 15px;}по умолчанию.Просто переопределите минимальную высоту, установленную в .navbar, вот так:
Изменение высоты элемента на что-то меньшее, чем минимальная высота, не повлияет ...
источник
если вы используете меньший источник, в
variables.lessфайле должна быть переменная для высоты навигационной панели . Если вы не используете исходный код, вы можете настроить его с помощью утилиты настройки, предоставляемой сайтом начальной загрузки. А затем вы можете скачать его и включить в свой проект. Переменная, которую вы ищете:@navbar-heightисточник
Это мой опыт
источник
.navbar .navbar-form { margin-top: 2px; margin-bottom: 0px }Если вы, ребята, генерируете свои таблицы стилей с помощью LESS / SASS и импортируете туда Bootstrap, я обнаружил, что переопределение переменной @ navbar-height позволяет вам установить высоту навигационной панели, которая изначально определена в файле variables.less.
источник
Хотел добавить свои 2 пенса и поблагодарить Джеймса Пулозе за его первоначальный ответ, он был единственным, который работал для моего конкретного проекта (MVC 5 с последней версией Bootstrap 3).
Это в основном нацелено на новичков, для ясности и упрощения будущих изменений я предлагаю вам добавить раздел внизу вашего файла CSS для вашего проекта, например, мне нравится делать это:
Взяв ответ Джеймса Пулоза выше, я сделал это:
Я изменил значения padding-top, чтобы сдвинуть текст вниз на моем элементе панели навигации. Вы можете в значительной степени переопределить любой элемент Bootstrap, подобный этому, и это хороший способ внести изменения, не портя базовые классы Boostrap, потому что последнее, что вы хотите сделать, - это внести изменения в них, а затем потерять их при обновлении Bootstrap!
Наконец, для еще большего разделения мне нравится разделять мои файлы CSS и использовать объявления @import для импорта ваших суб-файлов в один основной файл CSS для упрощения управления, например:
Примечание : если вы загружаете несколько файлов, убедитесь, что они загружаются в правильном порядке.
Надеюсь, это кому-то поможет.
источник
Думаю, мы можем написать меньше стилей, не меняя существующий цвет. Для меня сработало следующее (в Bootstrap 3.2.0)
Последний («navbar-brand») на самом деле нужен только в том случае, если у вас есть текст в качестве названия вашего «бренда».
источник
У меня та же проблема, высота строки меню, предоставляемой начальной загрузкой, была слишком большой, на самом деле я загрузил какой-то неправильный бутстрап, наконец избавился от него, загрузив исходный бутстрап с этого сайта .. http://getbootstrap.com/2.3 .2 / хотите использовать bootstrap в yii (netbeans), следуйте этому руководству, https://www.youtube.com/watch?v=XH_qG8gphaw ... Голос отсутствует, но шаги медленные, вы можете легко понять и реализовать их. Спасибо
источник