Bootstrap 3에서 navbar 높이를 어떻게 줄입니까?

Bootstrap 3에서 navbar 높이를 어떻게 줄입니까?

---

BS3의 navbar를 높이 20px로 만들고 싶습니다. 어떻게해야합니까?

나는 다음을 시도했다 :

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

아무것도하지 않았습니다.

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

막대의 크기를 늘릴 수있는 것처럼 보이지만 줄일 수는 없습니다.

컨테이너의 정렬 등을 유지하면서이를 수행하는 좋은 방법은 무엇입니까?

---

부트 스트랩에 15 픽셀 위에 패딩과 15 픽셀 아래 패딩했다 .navbar-nav > li > a당신이 당신의 CSS 파일을 재정 의하여이 감소 할 수 있도록하고 .navbar있다 min-height:50px;원하는만큼을 감소시킨다.

예를 들면

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

이 클래스를 CSS에 추가 한 다음 확인하십시오.

---

위의 Minder Saini 의 예는 거의 효과가 있지만 .navbar-brand감소해야합니다.

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

모바일 용으로 편집 ... 이 예제가 모바일에서도 작동하도록하려면 navbar 토글의 스타일을 다음과 같이 변경해야합니다.

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

---

<nav class="navbar ...사용 대신<nav class="navbar navbar-xs...

이 세 줄의 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; }

출력 :

---

Bootstrap 4
의 경우 이전 답변 중 일부는 Bootstrap 4에서 작동하지 않습니다.이 버전에서 탐색 모음의 크기를 줄이려면 이와 같은 패딩을 제거하는 것이 좋습니다.

.navbar { padding-top: 0.25rem; padding-bottom: 0.25rem; }

다른 스타일도 시도해 볼 수 있습니다.
탐색 모음의 전체 높이를 정의하는 스타일은 다음과 같습니다.

• padding-top의 경우 padding-bottom0.5rem으로 설정됩니다 .navbar.
• padding-top의 경우 padding-bottom0.5rem으로 설정됩니다 .navbar-text.
• line-height에서 상속 된 1.5rem 외에 body.

따라서 전체 탐색 모음은 루트 글꼴 크기의 3.5 배입니다.

In my case, which I was using big font sizes; I redefined the ".navbar" class in my CSS file like this:

.navbar {
  padding-top:    0.25rem; /* 0px does not look good on small screens */
  padding-bottom: 0.25rem;
  font-size: smaller;      /* Just because I am using big size font */
  line-height: 1em;
}

Final comment, avoid using absolute values when playing with the previous styles. Use the units rem or em instead.

---

The answer above worked fine (MVC5 + Bootstrap 3.0), but the height returned to the default once the navbar button showed up (very small screen). Had to add the below in my .css to fix that as well.

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

---

If you have only one nav and you want to change it, you should change your variables.less: @navbar-height (somewhere near line 265, I can't recall how many lines I added to mine).

This is referenced by the mixin .navbar-vertical-align, which is used for example to position the "toggle" element, anything with .navbar-form, .navbar-btn, and .navbar-text.

두 개의 navbar가 있고 서로 다른 높이를 원할 경우 Minder Saini의 대답 은 예를 들어으로 추가 #topnav.navbar로 검증 될 때 충분히 잘 작동 할 수 있지만 여러 장치 너비에서 테스트해야합니다.

---

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

---

이를 변수 재정의에 포함하여 기본 50px navbar-height를 변경하십시오.

이 기본 navbar-height는 각각 부트 스트랩의 SASS 및 LESS 변수 파일에서 365 행 및 360 행에서 찾을 수 있습니다.

파일 위치, SASS : bootstrap / assets / stylesheets / bootstrap / _variables.scss

파일 위치, LESS : bootstrap / less / variable.less

참고 URL : https://stackoverflow.com/questions/19576175/how-do-you-decrease-navbar-height-in-bootstrap-3