부트 스트랩 3.0 navbar의 높이 낮추기

고정 상단 동작과 함께 사용되는 부트 스트랩 3.0 navbar 높이를 줄이려고합니다. 여기에 코드를 사용하고 있습니다.

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

결과

화면에서 nav bar는 출력에서 ​​감소했지만 높이는 감소하지 않았습니다. 원래 높이는 분홍색으로 표시됩니다.

위의 CSS 스크립트는 부트 스트랩 2에서 거의 잘 작동합니다. *

높이를 적절하게 줄이는 방법이 있습니까?

몇 시간을 보낸 후 다음 CSS 클래스를 추가하면 문제가 해결되었습니다.

부트 스트랩 3.0. * 작업

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

부트 스트랩 3.3.4로 작업

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

전체 코드를 업데이트 하여 스크린 샷으로 navbar의 높이를 사용자 지정하고 줄입니다.

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

사용 코드 :

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

작업 솔루션 :

Bootstrap 3.0은 기본적으로 상단과 하단에 15px 패딩이 있으므로 덮어 쓰기 만하면됩니다!

예를 들면 :

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

.navbar에 설정된 최소 높이를 다음과 같이 재정의하면됩니다.

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

요소 높이를 최소 높이보다 작은 것으로 변경해도 차이가 없습니다.

적은 소스를 사용하는 경우 variables.less파일에 navbar 높이에 대한 변수가 있어야 합니다. 소스를 사용하지 않는 경우 부트 스트랩 사이트에서 제공 하는 사용자 정의 유틸리티를 사용하여이를 사용자 정의 할 수 있습니다 . 그런 다음 다운로드하여 프로젝트에 포함 할 수 있습니다. 찾고있는 변수는 다음과 같습니다.@navbar-height

이것은 내 경험입니다

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

LESS / SASS로 스타일 시트를 생성하고 거기에서 Bootstrap을 가져 오는 경우 @ navbar-height 변수를 재정의하면 원래 variables.less 파일에 정의 된 navbar의 높이를 설정할 수 있음을 발견했습니다.

내 2 펜스를 추가하고 싶었고 James Poulose의 원래 답변에 감사드립니다. 그것은 내 특정 프로젝트 (최신 버전의 Bootstrap 3을 사용하는 MVC 5)에서 유일하게 작동했습니다.

이것은 대부분 초보자를 대상으로하며 명확성을 높이고 향후 편집을 쉽게하기 위해 프로젝트의 CSS 파일 맨 아래에 섹션을 추가하는 것이 좋습니다. 예를 들어 다음과 같이합니다.

/* Bootstrap overrides */

.some-class-here {
}

위의 James Poulose의 답변을 취하면 다음과 같습니다.

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

내 navbar 요소에서 텍스트를 아래로 내리기 위해 padding-top 값을 변경했습니다. 이와 같은 Bootstrap 요소를 거의 재정의 할 수 있으며 Boostrap 기본 클래스를 망가 뜨리지 않고 변경할 수있는 좋은 방법입니다. 왜냐하면 마지막으로하고 싶은 일은 거기에서 변경 한 다음 Bootstrap을 업데이트 할 때 손실하는 것입니다!

마지막으로 더 많은 분리를 위해 CSS 파일을 분할하고 @import 선언을 사용하여 하위 파일을 하나의 기본 CSS 파일로 가져 와서 쉽게 관리 할 수 ​​있습니다.

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

참고 : 여러 파일을 가져 오는 경우 올바른 순서로로드되는지 확인해야합니다.

이것이 누군가를 돕기를 바랍니다.

기존 색상을 변경하지 않고 이렇게 적은 수의 스타일을 작성할 수 있다고 생각합니다. 다음은 나를 위해 일했습니다 (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; }

마지막 이름 ( 'navbar-brand')은 실제로 '브랜드'이름으로 텍스트가있는 경우에만 필요합니다.

같은 문제가 발생했습니다. 부트 스트랩에서 제공하는 메뉴 막대의 높이가 너무 컸습니다. 실제로 잘못된 부트 스트랩을 다운로드했습니다. 마침내이 사이트에서 원래 부트 스트랩을 다운로드하여 제거했습니다. http://getbootstrap.com/2.3 .2 / yii (netbeans)에서 부트 스트랩을 사용하려면이 자습서를 따르십시오. https://www.youtube.com/watch?v=XH_qG8gphaw ... 음성이 없지만 단계가 느려 쉽게 이해하고 구현할 수 있습니다. 그들. 감사