删除导航栏和横幅之间的 space

Question

我正在使用 Bootstrap 来制作我的自定义网站，但我遇到了问题。我的横幅和导航栏之间有一个很大的 space。我需要在不破坏其他任何东西的情况下将其删除。
我也在这个网站和其他网站上搜索修复程序，但其中 none 有效。这是代码：

HTML: http://pastebin.com/FSFA4GhG CSS: http://pastebin.com/TiQ1nm9h

我发现问题出在 <header> 某处，但我无法修复 it/find 那个错误。

Answer 1

很简单，只需从 #header 中删除高度属性，然后在 #banner 上正确放置顶部属性（与导航高度相同）：

body, div, h1, h2, p{
        margin: 0;
        padding: 0;
    }
 
    body{
        text-align: left;
    }
    header{
        width: 100%;
        z-index: 50;
        position: fixed;
        display: inline-block;
    }
 
    #banner {
        width: 100%;
        height: 500px;
        position: fixed;
        top: 50px;
        background: #AE1;
 
    }
 
    #content {
        width: 100%;
        position: relative;
        top: 400px;
        background: #ebe;
        height: 1000px;
    }

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>Fred WEB</title>
<!--Zobrazenie pre mobily-->
        <meta name="viewport" content="width=device-width,initial-scale=1">
 
<!--Pridanie JQuery a Boostrapu-->
    <link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
 
        <link rel="stylesheet" type="text/css" href="style.css" />
 
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
        </script>
 
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
        </script>
 
</head>
<body>
       
<div id="container">
        <header>
 
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">MENU</a>
    </div>
    <div id ="menu" class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">gg 1<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">11</a></li>
                                <li><a href="#">12</a></li>
          </ul>
        </li>
        <li><a href="#">gg2</a></li>
        <li><a href="#">gg 3</a></li>
      </ul>
    </div>
  </div>
</nav>
        </header>
 
        <div id="banner">
                        <h2>BANNER</h2>
 
        </div>
        <div id="content">
                <p>
                        CONTENT
                </p>
       
        </div>
</div>
 
 
</body>
</html>

Answer 2

您将 header 设置为 100px（导航栏默认值为 min-height: 50px）并更改 banner id 上的 top 属性以及 50px

旁注：您在 navbar-collapse div 上设置了 2 个单独的 ID，导致移动导航无法正常工作。

查看示例代码段。

body,
div,
h1,
h2,
p {
  margin: 0;
  padding: 0;
}
body {
  text-align: left;
}
header {
  height: 50px;
  width: 100%;
  background: #f00;
  z-index: 50;
  position: fixed;
  display: inline-block;
  padding: 0;
}
#banner {
  width: 100%;
  height: 500px;
  position: fixed;
  top: 50px;
  background: #AE1;
}
#content {
  width: 100%;
  position: relative;
  top: 400px;
  background: #ebe;
  height: 1000px;
}

<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.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div id="container">
  <header>
    <nav class="navbar navbar-inverse">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">MENU</a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a>
            </li>
            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#">gg 1<span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">11</a>
                </li>
                <li><a href="#">12</a>
                </li>
              </ul>
            </li>
            <li><a href="#">gg2</a>
            </li>
            <li><a href="#">gg 3</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </header>

  <div id="banner">
    <h2>BANNER</h2>

  </div>
  <div id="content">
    <p>
      CONTENT
    </p>

  </div>
</div>

Answer 3

尝试添加

nav {
    margin: 0px !important;
  }

并编辑横幅规则

#banner {
        width: 100%;
        height: 500px;
        position: fixed;
        top: 50px;
        background: #AE1;
 
}

删除导航栏和横幅之间的 space

Removing space between Navigation bar and banner

html

css

containers

header

twitter-bootstrap