Menurunkan tinggi navbar bootstrap 3.0

Saya mencoba untuk mengurangi tinggi navbar bootstrap 3.0 yang digunakan dengan perilaku teratas tetap. Di sini saya menggunakan kode.

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

Hasil

Dari layar itu terlihat, bilah navigasi menurun dalam output tetapi ketinggian tidak berkurang. tinggi asli ditampilkan dalam warna merah muda.

Script css di atas hampir bekerja dengan baik di bootstrap 2. *

Apakah ada cara untuk menurunkan ketinggian dengan benar.

Setelah menghabiskan beberapa jam, menambahkan kelas css berikut memperbaiki masalah saya.

Bekerja dengan Bootstrap 3.0. *

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

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

Perbarui kode Lengkap untuk menyesuaikan dan mengurangi ketinggian navbar dengan tangkapan layar.

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

Kode Penggunaan:

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

Solusi kerja:

Bootstrap 3.0 secara default memiliki bantalan 15px di bagian atas dan bawah, jadi kita hanya perlu menggantinya!

Sebagai contoh:

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

Cukup ganti min-height yang disetel di .navbar seperti ini:

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

Mengubah tinggi elemen menjadi lebih kecil dari tinggi min tidak akan membuat perbedaan ...

jika Anda menggunakan sumber yang lebih sedikit, harus ada variabel untuk tinggi navbar di variables.lessfile. Jika Anda tidak menggunakan sumbernya, Anda dapat menyesuaikannya menggunakan utilitas kustomisasi yang disediakan situs bootstrap. Dan kemudian Anda dapat mengunduhnya dan memasukkannya ke dalam proyek Anda. Variabel yang Anda cari adalah:@navbar-height

Ini pengalaman saya

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

Jika kalian membuat stylesheet dengan LESS / SASS dan mengimpor Bootstrap di sana, saya telah menemukan bahwa mengesampingkan variabel @ navbar-height memungkinkan Anda mengatur tinggi navbar, yang awalnya ditentukan di file variable.less.

Ingin menambahkan 2 pence saya dan terima kasih kepada James Poulose atas jawaban aslinya, itu adalah satu-satunya yang berhasil untuk proyek khusus saya (MVC 5 dengan versi terbaru dari Bootstrap 3).

Ini sebagian besar ditujukan untuk pemula, untuk kejelasan dan untuk membuat pengeditan lebih mudah di masa mendatang, saya sarankan Anda menambahkan bagian di bagian bawah file CSS Anda untuk proyek Anda misalnya saya suka melakukan ini:

/* Bootstrap overrides */

.some-class-here {
}

Mengambil jawaban James Poulose di atas saya melakukan ini:

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

Saya mengubah nilai padding-top untuk mendorong teks ke bawah pada elemen navbar saya. Anda dapat mengganti hampir semua elemen Bootstrap seperti ini dan ini adalah cara yang baik untuk membuat perubahan tanpa mengacaukan kelas dasar Boostrap karena hal terakhir yang ingin Anda lakukan adalah membuat perubahan di sana dan kemudian menghilangkannya saat Anda memperbarui Bootstrap!

Akhirnya untuk pemisahan yang lebih banyak lagi saya ingin membagi file CSS saya dan menggunakan deklarasi @import untuk mengimpor sub-file Anda ke dalam satu File CSS utama untuk memudahkan pengelolaan misalnya:

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

catatan : jika Anda menarik banyak file, Anda perlu memastikan file dimuat dalam urutan yang benar.

Semoga ini bisa membantu seseorang.

Saya pikir kita bisa menulis gaya yang lebih sedikit ini, tanpa mengubah warna yang ada. Berikut ini bekerja untuk saya (di 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; }

Yang terakhir ('navbar-brand') sebenarnya dibutuhkan hanya jika Anda memiliki teks sebagai nama 'merek' Anda.

Saya mendapat masalah yang sama, ketinggian bilah menu yang saya sediakan oleh bootstrap terlalu besar, sebenarnya saya mengunduh beberapa bootstrap yang salah, akhirnya singkirkan dengan mengunduh bootstrap orignal dari situs ini .. http://getbootstrap.com/2.3 .2 / ingin menggunakan bootstrap di yii (netbeans) ikuti tutorial ini, https://www.youtube.com/watch?v=XH_qG8gphaw ... Suara tidak ada tetapi langkah-langkahnya lambat sehingga Anda dapat dengan mudah memahami dan menerapkan mereka. Terima kasih