我是新手工程师，在折叠这些页眉和页脚导航栏时遇到维护行高的问题......
<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 © 2015</a></li>
</ul>
</div>
使用这些CSS覆盖......
.navbar-nav li a {
line-height: 20px;
}
.navbar-header {
line-height: 30px;
}
发生的事情是，无论我将CSS设置为什么，当页面崩溃时，它们总是会增加（从事物的外观增加大约5-10个像素）。所以我一直在搜索默认的bootstrap css文件中搜索某些填充变量，这些填充变量在崩溃时被添加但是我找不到任何东西。
任何想法我可能在这里做错了吗？甚至一个更好的方法来尝试和隔离问题的一般想法？我还要补充一点，我下载了一个带有30px导航栏高度的自定义版本的bootstrap。
感谢您的任何想法！
答案 0 :(得分：1)
.navbar-toggle变得可见，它的大小和边距会导致.navbar增长。
在codepen中.navbar-header的样式如下：
@media (min-width: 768px)
{
margin-right: 0;
margin-left: 0;
}
.navbar-header
{
margin-right: -15px;
margin-left: -15px;
}
导致徽标移动。
答案 1 :(得分：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 © 2015</a>
</li>
</ul>
</div>
</footer>