Question

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

我尝试使用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;
}

Answer 1

那个＆＃34;白色空间＆＃34;是.navbar的边界。为了消除它，只需删除它的边框：

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

Answer 2

对于确切的答案，页面的链接会很好。

可能是边境？

基思

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

2 个答案: