การลดความสูงของ bootstrap 3.0 navbar

ฉันกำลังพยายามลดความสูงของ navbar bootstrap 3.0 ซึ่งใช้กับพฤติกรรมคงที่ นี่ฉันกำลังใช้รหัส

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

ผลลัพธ์

จากหน้าจอจะแสดงแถบนำทางในเอาต์พุตลดลง แต่ความสูงไม่ลดลง ความสูงเดิมจะแสดงเป็นสีชมพู

สคริปต์ css ด้านบนเกือบจะทำงานได้ดีใน bootstrap 2 *

มีวิธีใดบ้างที่จะลดความสูงได้อย่างเหมาะสม

หลังจากใช้เวลาไม่กี่ชั่วโมงการเพิ่มคลาส css ต่อไปนี้ช่วยแก้ปัญหาของฉันได้

ทำงานกับ Bootstrap 3.0. *

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

ทำงานกับ Bootstrap 3.3.4

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

อัปเดต โค้ดที่สมบูรณ์เพื่อปรับแต่งและลดความสูงของแถบนำทางด้วยภาพหน้าจอ

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}

เพียงแค่แทนที่ค่า min-height ที่ตั้งไว้ใน. navbar ดังนี้:

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

การเปลี่ยนความสูงขององค์ประกอบให้เล็กกว่าความสูงต่ำสุดจะไม่สร้างความแตกต่าง ...

หากคุณใช้แหล่งที่มาน้อยกว่าควรมีตัวแปรสำหรับความสูงของแถบนำทางในvariables.lessไฟล์ หากคุณไม่ได้ใช้ซอร์สคุณสามารถปรับแต่งได้โดยใช้ยูทิลิตี้ปรับแต่งที่ไซต์ของ bootstrap มีให้ จากนั้นคุณสามารถดาวน์โหลดและรวมไว้ในโครงการของคุณ ตัวแปรที่คุณกำลังมองหาคือ:@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 ทำให้คุณสามารถตั้งค่าความสูงของแถบนำทางซึ่งเดิมกำหนดไว้ในไฟล์ variable.less

ต้องการเพิ่ม 2 เพนนีของฉันและขอบคุณ James Poulose สำหรับคำตอบเดิมของเขามันเป็นเพียงคนเดียวที่ใช้ได้กับโครงการเฉพาะของฉัน (MVC 5 พร้อม Bootstrap 3 เวอร์ชันล่าสุด)

ส่วนใหญ่มุ่งเป้าไปที่ผู้เริ่มต้นเพื่อความชัดเจนและเพื่อให้การแก้ไขในอนาคตง่ายขึ้นฉันขอแนะนำให้คุณเพิ่มส่วนที่ด้านล่างของไฟล์ 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; }

ฉันเปลี่ยนค่า padding-top เพื่อดันข้อความลงบนองค์ประกอบ navbar ของฉัน คุณสามารถแทนที่องค์ประกอบ 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') จำเป็นจริงๆก็ต่อเมื่อคุณมีข้อความเป็นชื่อ "แบรนด์" ของคุณ

ฉันพบปัญหาเดียวกันความสูงของแถบเมนูที่จัดทำโดย bootstrap นั้นใหญ่เกินไปจริงๆแล้วฉันดาวน์โหลด bootstrap ผิดพลาดในที่สุดก็กำจัดมันโดยดาวน์โหลด orignal bootstrap จากไซต์นี้ .. http://getbootstrap.com/2.3 .2 / ต้องการใช้ bootstrap ใน yii (netbeans) ทำตามบทช่วยสอนนี้ https://www.youtube.com/watch?v=XH_qG8gphaw ... ไม่มีเสียง แต่ขั้นตอนช้าคุณสามารถเข้าใจและนำไปใช้ได้อย่างง่ายดาย พวกเขา ขอบคุณ