Jak zmniejszyć wysokość paska w Bootstrap 3?

Chcę, aby mój pasek nawigacji w BS3 miał wysokość 20 pikseli. Jak mam to zrobic?Jak zmniejszyć wysokość paska w Bootstrap 3?

Próbowałem następujące:

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

nic nie zrobił.

.navbar-fixed-top { 
    height: 25px; /* Whatever you want. */ 
}

Pojawia się, aby zwiększyć rozmiar paska, ale nie można go zmniejszyć.

Jaki jest dobry sposób to zrobić zachowując ustawienie kontenera itp

Źródło

2013-10-24 Rolando

bootstrap miał 15px top wyściółka i 15px dolny wyściółka na .navbar-nav > li > a więc trzeba ją zmniejszyć poprzez nadpisanie go w pliku css i .navbar ma min-height:50px; zmniejszyć go tak bardzo, jak chcesz.

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

dodać do tych klas CSS, a następnie sprawdzić.

Źródło

2013-10-24 20:50:11

czy o to prosiłeś? –

Tak. Dziękuję Ci! – Rolando

Szukałem dużo na SO i Google, ale to rozwiązanie to zrobiło! Dziękuję Ci! – n2o

Jeśli masz tylko jedną nawigację i chcesz ją zmienić, powinieneś zmienić swoje zmienne.less: @navbar-height (gdzieś w pobliżu linii 265, nie pamiętam, ile linii dodałem do mojej).

Jest to określone przez mixin .navbar-vertical-align, które jest używane na przykład do ustawiania elementu "toggle", cokolwiek z .navbar-form, .navbar-btn, i .navbar-text.

Jeśli masz dwie szyny i chcesz, aby były różne wysokości, Minder Saini's answer może działać wystarczająco dobrze, kiedy zostanie zakwalifikowane przez np. #topnav.navbar, ale powinno być testowane na wielu szerokościach urządzenia.

Źródło

2014-05-01 17:20:03

Zamiast <nav class="navbar ... użycie <nav class="navbar navbar-xs...

i dodać te 3 linię css

.navbar-xs { min-height:28px; height: 28px; } 
.navbar-xs .navbar-brand{ padding: 0px 12px;font-size: 16px;line-height: 28px; } 
.navbar-xs .navbar-nav > li > a { padding-top: 0px; padding-bottom: 0px; line-height: 28px; }

Wyjście:

enter image description here

Źródło

2015-01-23 05:02:28 Yasser

Nie reaguje. –

Minder Saini „s Powyższy przykład prawie działa, ale .navbar-brand potrzeba s również ulegnie zmniejszeniu.

przykład roboczych (przy użyciu go na moim miejscu) z Bootstrap 3.3.4:

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

Edycja dla telefon ... Aby ten przykład praca na telefon, jak dobrze, trzeba zmienić stylistykę przełącznik NavBar jak tak

.navbar-toggle { 
    padding: 0 0; 
    margin-top: 7px; 
    margin-bottom: 0; 
}

Źródło

2015-03-26 18:16:17 felwithe

To miało być moje następne wyszukiwanie SO. Dzięki – sMaN

chciałbym móc zagłosować na więcej upvotes, ludzie po prostu mieszają się ze stylem na inne podobne pytania, ale w końcu to zadziałało – Abhinay

nie działa poprawnie w widoku mobilnym – TomSawyer

odpowiedź powyżej działało w porządku (MVC5 + Bootstrap 3.0), ale wysokość wrócił do domyślnie raz na NavBar b pojawił się utton (bardzo mały ekran). Musiałam dodać poniższe w .css, aby to naprawić.

.navbar-header .navbar-toggle { 
    margin-top:0px; 
    margin-bottom:0px; 
    padding-bottom:0px; 
}

Źródło

2017-03-12 07:25:40 Arfath

.navbar-nav > li > a {padding-top:7px !important; padding-bottom:7px !important;} 
.navbar {min-height:32px !important;} 
.navbar-brand{padding-top:7px !important; max-height: 24px; } 
.navbar .navbar-toggle { margin-top: 0px; margin-bottom: 0px; padding: 8px 9px; }

Źródło

2017-09-14 00:24:09 HARISH

Byłoby pomocne dla czytelników, gdyby można było dodać krótkie wyjaśnienie, co robią te style CSS. :) – Nisarg

Wystarczy zmienić domyślne 50px NavBar-wysokość poprzez włączenie tego do zmiennej nadpisania.

Możesz znaleźć domyślną wysokość paska nawigacyjnego w linii 365 i 360 odpowiednio dla zmiennych SASS i LESS programu bootstrap.

Źródło

2018-02-06 08:34:48 MsC

Jak zmniejszyć wysokość paska w Bootstrap 3?

Odpowiedz

Powiązane problemy