Próbuję zmniejszyć wysokość paska nawigacyjnego bootstrap 3.0, który jest używany ze stałym zachowaniem góry. Tutaj używam kodu.
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;}Wynik
Na ekranie widać, że pasek nawigacji zmniejszył się, ale wysokość nie spadła. oryginalna wysokość jest pokazana w kolorze różowym.
Powyższy skrypt css działa prawie dobrze w bootstrapie 2. *
Czy istnieje sposób na prawidłowe zmniejszenie wysokości.
twitter-bootstrap
navbar
twitter-bootstrap-3
irfanmcsd
źródło
źródło
Odpowiedzi:
Po spędzeniu kilku godzin dodanie następującej klasy css rozwiązało mój problem.
Pracuj z Bootstrap 3.0. *
Pracuj z Bootstrap 3.3.4
Zaktualizuj cały kod, aby dostosować i zmniejszyć wysokość paska nawigacyjnego za pomocą zrzutu ekranu.
CSS:
Kod użytkowania:
źródło
Rozwiązanie robocze:
Bootstrap 3.0 ma domyślnie wypełnienie 15 pikseli na górze i na dole, więc musimy to zmienić!
Na przykład:
źródło
.navbar-nav > li > a {padding-top: 15px; padding-bottom: 15px;}domyślne.Po prostu zastąp minimalną wysokość ustawioną w .navbar w następujący sposób:
Zmiana wysokości elementów na mniejszą niż minimalna wysokość nie zrobi różnicy ...
źródło
jeśli używasz mniej źródła, powinna istnieć zmienna dla wysokości paska nawigacyjnego w
variables.lesspliku. Jeśli nie używasz źródła, możesz je dostosować, korzystając z narzędzia dostosowywania, które zapewnia witryna bootstrap. Następnie możesz go pobrać i dołączyć do swojego projektu. Zmienna, której szukasz, to:@navbar-heightźródło
To jest moje doświadczenie
źródło
.navbar .navbar-form { margin-top: 2px; margin-bottom: 0px }Jeśli generujesz swoje arkusze stylów za pomocą LESS / SASS i importujesz tam Bootstrap, zauważyłem, że nadpisanie zmiennej @ navbar-height pozwala ustawić wysokość paska nawigacyjnego, która jest pierwotnie zdefiniowana w pliku variable.less.
źródło
Chciałem dodać moje 2 pensy i podziękować Jamesowi Poulose za jego oryginalną odpowiedź, jako jedyny działał w moim konkretnym projekcie (MVC 5 z najnowszą wersją Bootstrap 3).
Jest to głównie przeznaczone dla początkujących, dla przejrzystości i ułatwienia przyszłych edycji. Sugeruję dodanie sekcji na dole pliku CSS dla twojego projektu, na przykład lubię to zrobić:
Biorąc odpowiedź Jamesa Poulose'a powyżej, zrobiłem to:
Zmieniłem wartości padding-top, aby przesunąć tekst w dół na moim elemencie navbar. Możesz prawie nadpisać dowolny element Bootstrap, taki jak ten, i jest to dobry sposób na wprowadzanie zmian bez zepsucia podstawowych klas Boostrap, ponieważ ostatnią rzeczą, którą chcesz zrobić, jest dokonanie tam zmiany, a następnie utrata jej po zaktualizowaniu Bootstrap!
Wreszcie, dla jeszcze większej separacji, chciałbym podzielić moje pliki CSS i użyć deklaracji @import, aby zaimportować twoje pod-pliki do jednego głównego pliku CSS w celu łatwego zarządzania, na przykład:
Uwaga : jeśli pobierasz wiele plików, upewnij się, że ładują się one we właściwej kolejności.
Mam nadzieję, że to komuś pomoże.
źródło
Myślę, że możemy napisać mniej stylów bez zmiany istniejącego koloru. Poniższe działały dla mnie (w Bootstrap 3.2.0)
Ta ostatnia („marka navbar”) jest faktycznie potrzebna tylko wtedy, gdy jako nazwę „marki” masz tekst.
źródło
Mam ten sam problem, wysokość mojego paska menu dostarczanego przez bootstrap była zbyt duża, właściwie pobrałem zły bootstrap, w końcu się go pozbyłem, pobierając oryginalny bootstrap z tej strony .. http://getbootstrap.com/2.3 .2 / chcę używać bootstrap w yii (netbeans) postępuj zgodnie z tym samouczkiem, https://www.youtube.com/watch?v=XH_qG8gphaw ... Głosu nie ma, ale kroki są powolne, które możesz łatwo zrozumieć i wdrożyć im. Dzięki
źródło