引導導航欄高度增加了崩潰

Question

我是新來引導和有問題保持的line-height倒塌這些頁眉和頁腳的導航欄時...

<nav class="navbar navbar-fixed-top navbar-inverse"> 
     <div class="container-fluid no-padding"> 

<!-- header navbar --> 
<div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar" style = "line-height: 30px;"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="glyphicon glyphicon-menu-hamburger"></span> 
      </button> 
      <a href="#" class="pull-left"> 
      <img height="35px;" src="image/companyLogo.png" style="margin-left: 5px;"> 
      </a> 
     <a class="navbar-brand" href="#" style = "line-height: 30px; margin-left: 1px;">Company Name</a> 
</div> 

<!-- footer navbar --> 
<div class="nav navbar-default navbar-fixed-bottom" style="background-color: #ADD6FF; font-size: 11px;"> 
      <ul class="nav navbar-nav" style = "float:right;"> 
      <li><a href="#">Copyright &#169; 2015</a></li> 
      </ul> 
</div> 

有了這些CSS覆蓋...

.navbar-nav li a { 
line-height: 20px; 
} 

.navbar-header { 
line-height: 30px; 
} 

發生什麼事情是，無論我設置的CSS，當頁面崩潰時，它們總是增加（從外觀約5-10像素）。所以我一直在尋找通過默認的引導程序的CSS文件的某種填充變量，這是在崩潰時添加的，但我找不到任何東西。

任何想法，我可能會在這裏做錯嗎？即使是一個更好的方式來嘗試和隔離問題的一般想法？我還應該補充一點，我下載了30px導航欄高度的自定義引導版本。

感謝您的任何想法！

Answer 1

行高問題並不是切換本身，它被替換爲一個Glyphicon，使得當你在768px以下時導航欄被壓下。

至於其他元件被重新定位（如圖像），這是因爲你與其中圖像被放置在集管內以及沿除去從container-fluid的填充。這些在默認情況下都會改變視口，所以如果你不考慮它們，它可能會變得混亂。

也有CSS規則似乎是重複/冗餘，所以也有一些衝突（或沒有達到正確的選擇器）。看例子。

html { 
 
    position: relative; 
 
    min-height: 100%; 
 
} 
 
body, 
 
html { 
 
    margin-top: 125px; 
 
    margin-bottom: 50px; 
 
} 
 
.footer { 
 
    vertical-align: center; 
 
    position: absolute; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: 50px; 
 
    background-color: #ADD6FF; 
 
    padding: 12px 0; 
 
} 
 
ul.footer-nav > li { 
 
    margin-top: 5px; 
 
    list-style: none; 
 
    vertical-align: center; 
 
    text-align: right; 
 
} 
 
ul.footer-nav > li > a { 
 
    text-decoration: none; 
 
    color: #444444; 
 
} 
 
.navbar.navbar-custom { 
 
    border-radius: 0px; 
 
    background: #33CC33; 
 
    border: 1px solid #FFFFFF; 
 
} 
 
.navbar-custom .navbar-nav > li > a { 
 
    color: #fff; 
 
} 
 
.navbar-custom .navbar-brand { 
 
    color: #fff; 
 
} 
 
.navbar-custom .navbar-logo { 
 
    float: left; 
 
    margin-left: 15px; 
 
} 
 
.navbar-custom .navbar-header .navbar-toggle { 
 
    background: none; 
 
    border: none; 
 
    line-height: 20px; 
 
    padding-bottom: 0; 
 
} 
 
.navbar-custom .navbar-header .navbar-toggle:hover, 
 
.navbar-custom .navbar-header .navbar-toggle:focus { 
 
    background: none; 
 
    border: none; 
 
} 
 
.navbar-custom .navbar-header .navbar-toggle .glyphicon-menu-hamburger, 
 
.navbar-custom .navbar-header .navbar-toggle .glyphicon-menu-hamburger:hover, 
 
.navbar-custom .navbar-toggle .navbar-header .glyphicon-menu-hamburger:focus { 
 
    color: #F0C425; 
 
} 
 
.navbar-custom .navbar-header .navbar-toggle .navbar-custom .navbar-right { 
 
    margin-right: 15px; 
 
} 
 
.navbar-default .lower-nav { 
 
    border: none; 
 
    border-radius: 0px; 
 
    background: #ADD6FF; 
 
    border: none; 
 
    margin-bottom: 0; 
 
} 
 
.navbar-default .lower-nav .nav-buttons { 
 
    margin: 5px 10px; 
 
    top: 5px; 
 
    border-radius border-radius: 0px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container-fluid"> 
 
    <nav class="navbar navbar-default navbar-custom navbar-fixed-top" role="navigation"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-navbar"> <span class="sr-only">Toggle navigation</span> 
 
     <span class="glyphicon glyphicon-menu-hamburger"></span> 
 

 
     </button> 
 
     <a class="navbar-logo" href="#"> 
 
     <img src="http://placehold.it/100x50/ff0/ff0"> 
 
     </a><a class="navbar-brand" href="#">Brand</a> 
 

 
    </div> 
 
    <div class="collapse navbar-collapse" id="bs-navbar"> 
 
     <ul class="nav navbar-nav"> 
 
     <li><a href="#">Home</a> 
 

 
     </li> 
 
     <li><a href="#">About</a> 
 

 
     </li> 
 
     <li><a href="#">Contact</a> 
 

 
     </li> 
 
     </ul> 
 
    </div> 
 
    <nav class="navbar navbar-default lower-nav" role="navigation"> 
 
     <div class="btn-group pull-left"> 
 
     <div class="btn btn-link nav-buttons"><span class="glyphicon glyphicon-search"></span> 
 

 
     </div> 
 
     <div class="btn btn-link nav-buttons"><span class="glyphicon glyphicon-cloud"></span> 
 

 
     </div> 
 
     <div class="btn btn-link nav-buttons"><span class="glyphicon glyphicon-th"></span> 
 

 
     </div> 
 
     </div> 
 
    </nav> 
 
    </nav> 
 
</div> 
 
<div class="container"> 
 
    <div class="alert alert-info"> <a href="http://getbootstrap.com//">Bootstrap 3</a> 
 
    </div> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultrices enim id tortor tincidunt, eget mollis mauris gravida. Mauris sem leo, feugiat ut felis blandit, imperdiet egestas orci. Proin lacinia at massa fermentum facilisis. Donec laoreet 
 
    facilisis nunc, sed posuere magna rhoncus sed. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent augue ipsum, rhoncus vel tempus sed, vehicula non purus. Nunc sit amet consectetur risus. Integer eget justo ut sapien consectetur 
 
    auctor id eu augue. Quisque ac elit congue, eleifend lectus a, tempor purus. In hac habitasse platea dictumst. Phasellus gravida massa arcu, sed sodales orci interdum vel. Curabitur ullamcorper leo mauris, ut interdum felis mollis id. Nunc porttitor 
 
    egestas fringilla. Suspendisse volutpat sem quis sagittis fermentum. Fusce in laoreet elit. Etiam aliquam varius tincidunt.</p> 
 
    <p>Nunc nisi justo, ultricies at lobortis et, fermentum at dolor. Nulla ultrices erat et erat egestas, in luctus justo pellentesque. In convallis purus ut pellentesque interdum. Curabitur in neque lectus. Nullam lobortis sodales elit, eu fringilla eros 
 
    aliquet vel. Aliquam ac ipsum vel nunc vestibulum luctus nec sit amet mauris. Ut viverra ornare risus eu condimentum. Fusce sollicitudin volutpat nisl id dignissim. Sed malesuada dui at magna imperdiet, non accumsan odio imperdiet. Etiam tristique 
 
    fermentum enim, vel dictum nulla fermentum ac. Etiam in bibendum nisi. Vestibulum neque lectus, vehicula eu sagittis ut, blandit sit amet mi.</p> 
 
    <p>Maecenas lacinia vestibulum magna. Integer mollis varius ullamcorper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sit amet tortor turpis. Cras pharetra tellus elit, nec iaculis erat pellentesque 
 
    sit amet. Nullam varius felis vel velit fermentum, nec facilisis erat accumsan. Nullam facilisis orci quam, eget semper turpis dictum id. Aenean magna ante, lobortis id sollicitudin quis, dapibus nec nisi. Maecenas aliquet posuere lectus, a ultricies 
 
    arcu sodales sodales. Proin dignissim facilisis consectetur. Pellentesque suscipit quis dui eget malesuada. Quisque cursus neque a faucibus egestas. Phasellus sed nulla scelerisque diam adipiscing suscipit. Etiam sit amet enim ultricies risus consequat 
 
    vestibulum eu sit amet urna.</p> 
 
    <p>Vivamus hendrerit eget augue viverra auctor. Praesent mi leo, facilisis vel nisi vitae, sodales rhoncus augue. Maecenas purus nunc, commodo at massa eu, blandit aliquet enim. Proin sem neque, imperdiet non arcu eu, sagittis malesuada est. Fusce enim 
 
    neque, facilisis et mattis ut, vulputate sed justo. Vivamus elementum elit nunc, eget tempor erat adipiscing nec. Praesent vestibulum dapibus vehicula. Pellentesque viverra faucibus leo in ornare. Sed sodales faucibus tincidunt. Vivamus dignissim 
 
    tristique libero sit amet aliquet. Donec ut nunc dolor. Duis molestie tortor mi, id auctor nisi ullamcorper et. Proin eu ante cursus, varius felis id, porta orci.</p> 
 
    <p>Aliquam imperdiet scelerisque purus, nec sagittis mi auctor vitae. Maecenas sodales scelerisque massa, vitae iaculis neque tincidunt sed. Vivamus id imperdiet lectus. Fusce id tellus ut tellus volutpat hendrerit in at justo. Duis eu tempus nibh. Nunc 
 
    consectetur euismod sapien, eget placerat metus tempor sit amet. Maecenas at sem ac purus dictum viverra. Praesent eu neque in metus congue dictum eu in dolor. Mauris a elit sem. Quisque non velit malesuada ligula aliquet lacinia. Donec congue, leo 
 
    lacinia vulputate pulvinar, est justo venenatis nisi, sit amet condimentum massa sem sed urna. Duis eget pretium eros. Sed et rutrum leo, sit amet sollicitudin urna. Nullam dui augue, malesuada sed lectus sed, malesuada fringilla massa.</p> 
 
    <div class="alert alert-danger"> <a href="#">Start the Footer</a> 
 
    </div> 
 
</div> 
 
<footer class="footer"> 
 
    <div class="container"> 
 
    <ul class="footer-nav"> 
 
     <li><a href="#">Copyright &#169; 2015</a> 
 

 
     </li> 
 
    </ul> 
 
    </div> 
 
</footer>

Answer 2

.navbar-toggle變得可見，它的大小和邊距導致.navbar增長。

在codepen .navbar-header是風格類似：

@media (min-width: 768px) 
{ 
    margin-right: 0; 
    margin-left: 0; 
} 

.navbar-header 
{ 
    margin-right: -15px; 
    margin-left: -15px; 
} 

這是造成標誌移動。