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.
twitter-bootstrap
navbar
twitter-bootstrap-3
irfanmcsd
sumber
sumber
Jawaban:
Setelah menghabiskan beberapa jam, menambahkan kelas css berikut memperbaiki masalah saya.
Bekerja dengan Bootstrap 3.0. *
Bekerja dengan Bootstrap 3.3.4
Perbarui kode Lengkap untuk menyesuaikan dan mengurangi ketinggian navbar dengan tangkapan layar.
CSS:
Kode Penggunaan:
sumber
Solusi kerja:
Bootstrap 3.0 secara default memiliki bantalan 15px di bagian atas dan bawah, jadi kita hanya perlu menggantinya!
Sebagai contoh:
sumber
.navbar-nav > li > a {padding-top: 15px; padding-bottom: 15px;}secara default.Cukup ganti min-height yang disetel di .navbar seperti ini:
Mengubah tinggi elemen menjadi lebih kecil dari tinggi min tidak akan membuat perbedaan ...
sumber
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-heightsumber
Ini pengalaman saya
sumber
.navbar .navbar-form { margin-top: 2px; margin-bottom: 0px }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.
sumber
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:
Mengambil jawaban James Poulose di atas saya melakukan ini:
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:
catatan : jika Anda menarik banyak file, Anda perlu memastikan file dimuat dalam urutan yang benar.
Semoga ini bisa membantu seseorang.
sumber
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)
Yang terakhir ('navbar-brand') sebenarnya dibutuhkan hanya jika Anda memiliki teks sebagai nama 'merek' Anda.
sumber
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
sumber