如何摆脱 Bootstrap Navbar 周围的空白区域？答案

【问题标题】：How do I get rid of the white space surrounding the Bootstrap Navbar?如何摆脱 Bootstrap Navbar 周围的空白区域？
【发布时间】：2014-08-17 22:26:05
【问题描述】：

如何消除引导导航栏周围的空白？

http://screencast.com/t/1dOukVBLZ

我尝试使用 0px 填充、边距、边框覆盖 CSS，并确认导航栏上方和下方的图像中没有空白。

<html>
  <head>
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="css/navbar.css" rel="stylesheet" type="text/css">
    <script src="js/ie10-viewport-bug-workaround.js"></script>
  </head>
<body>
  <div class="container"> 
    <!-- Header --> 
    <img src='images/Header.gif' class="img-responsive"> 
    <!-- Static navbar -->
    <div class="navbar navbar-default" role="navigation">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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>
          <a class="navbar-brand" href="#">Project name</a> </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="index.html">Home</a></li>
            <li><a href="properties.html">Properties</a></li>
            <li><a href="projects.html">Projects</a></li>
            <li><a href="services.html">Services</a></li>
            <li><a href="about.html">About Us</a></li>
            <li><a href="contact.html">Contact Us</a></li>
          </ul>
        </div> 
      </div>  
    </div>

<div> 
<!-- Downtown Skyline --> 
<img  src='images/HomeImage.jpg' class="img-responsive">
</body>
</html>

我正在使用所有的 Bootstrap CSS，这是我的自定义 CSS 表 navbar.css：

* {
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
  -o-border-radius: 0 !important;  
  border-radius: 0 !important;        
}

body {
  background: #DEDFDE;
  padding-top: 20px;
}

.navbar {
  background: #0069AA;
  margin: 0;
}

【问题讨论】：

标签： html css twitter-bootstrap-3 navigationbar

【解决方案1】：

那个“空白”是.navbar 的边界。为了摆脱它，只需删除它的边框：

.navbar {
    background: #0069AA;
    margin: 0;
    border: 0;
}

【讨论】：

【解决方案2】：

要获得准确的答案，最好提供一个指向该页面的链接。

可能是边框？

基思

【讨论】：