Önyükleme 3.0 navbar yüksekliğini azaltma

Sabit üst davranış ile kullanılan bootstrap 3.0 navbar yüksekliğini azaltmaya çalışıyorum. Burada kodu kullanıyorum.

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;}

Sonuç

Ekrandan, gezinme çubuğunun çıktıda azaldığını ancak yükseklik azalmadığını gösteriyor. orijinal yükseklik pembe renkte gösterilmiştir.

Yukarıdaki css betiği, bootstrap 2'de neredeyse iyi çalışıyor. *

Yüksekliği düzgün bir şekilde azaltmanın bir yolu var mı?

Birkaç saat geçirdikten sonra, aşağıdaki css sınıfını eklemek sorunumu çözdü.

Bootstrap 3.0 ile çalışın. *

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

Bootstrap 3.3.4 ile çalışma

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

Gezinme çubuğunun yüksekliğini ekran görüntüsü ile özelleştirmek ve azaltmak için Tam kodu güncelleyin .

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; }

Kullanım Kodu:

<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>

Çalışma çözümü:

Bootstrap 3.0 varsayılan olarak üstte ve altta 15px dolguya sahiptir, bu yüzden onu geçersiz kılmamız gerekiyor!

Örneğin:

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

.Navbar'da ayarlanan minimum yüksekliği şu şekilde geçersiz kılmanız yeterlidir:

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

Bir öğenin yüksekliğini minimum yükseklikten daha küçük bir şeye değiştirmek bir fark yaratmaz ...

Daha az kaynak kullanıyorsanız, variables.lessdosyada navbar yüksekliği için bir değişken olmalıdır . Kaynağı kullanmıyorsanız, bootstrap sitesinin sağladığı özelleştirme özelliğini kullanarak onu özelleştirebilirsiniz . Ve sonra onu indirebilir ve projenize dahil edebilirsiniz. Aradığınız değişken:@navbar-height

Bu benim deneyimim

 .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;}

Eğer stil sayfalarınızı LESS / SASS ile oluşturuyorsanız ve Bootstrap'i oraya aktarıyorsanız, @ navbar-height değişkenini geçersiz kılmanın, başlangıçta değişkenler.less dosyasında tanımlanan navbar yüksekliğini ayarlamanıza izin verdiğini gördüm.

2 pensimi eklemek ve orijinal cevabı için James Poulose'a teşekkür etmek istedim, bu benim özel projem için işe yarayan tek kişiydi (Bootstrap 3'ün en son sürümü ile MVC 5).

Bu daha çok yeni başlayanlara yöneliktir, netlik sağlamak ve gelecekteki düzenlemeleri kolaylaştırmak için CSS dosyanızın altına projeniz için bir bölüm eklemenizi öneririm, örneğin bunu yapmaktan hoşlanıyorum:

/* Bootstrap overrides */

.some-class-here {
}

James Poulose'un cevabını yukarıda ele alarak şunu yaptım:

/* 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; }

Metni gezinti çubuğu öğemde aşağı itmek için dolgu üst değerlerini değiştirdim. Bunun gibi herhangi bir Bootstrap öğesini hemen hemen geçersiz kılabilirsiniz ve Boostrap temel sınıflarını bozmadan değişiklik yapmanın iyi bir yolu çünkü yapmak isteyeceğiniz son şey, orada bir değişiklik yapmak ve Bootstrap'ı güncellediğinizde onu kaybetmektir!

Son olarak, daha da fazla ayırma için CSS dosyalarımı bölmeyi ve alt dosyalarınızı kolay yönetim için tek bir ana CSS Dosyasına aktarmak için @import bildirimlerini kullanmayı seviyorum, örneğin:

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

not : birden fazla dosya çekiyorsanız, bunların doğru sırada yüklendiğinden emin olmanız gerekir.

Umarım bu birine yardımcı olur.

Sanırım bu daha az stili mevcut rengi değiştirmeden yazabiliriz. Aşağıdakiler benim için çalıştı (Bootstrap 3.2.0'da)

.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; }

Sonuncusu ('navbar-marka') aslında yalnızca 'marka' adınız olarak metne sahipseniz gereklidir.

Aynı sorunu yaşadım, önyükleme tarafından sağlanan menü çubuğumun yüksekliği çok büyüktü, aslında yanlış bir önyükleme indirdim, nihayet bu siteden orijinal önyüklemeyi indirerek ondan kurtuldum .. http://getbootstrap.com/2.3 .2 / yii'de (netbeans) önyükleme kullanmak istiyorum bu öğreticiyi izleyin, https://www.youtube.com/watch?v=XH_qG8gphaw ... Ses mevcut değil ancak adımlar yavaştır, kolayca anlayabilir ve uygulayabilirsiniz onlar. Teşekkürler