Question

我使用Bootstrap制作我的自定义网站，但我遇到了问题。我的横幅和导航栏之间有很大的空间。我需要在不破坏其他任何内容的情况下将其删除我在这个网站和其他网站上也在寻找解决方案，但这些都没有。这是代码：

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

我发现问题出在$array = array( array( "location" => array("street_name" => "Derby Road"), "info" => array("status" => "available"), "specs" => array("bedroom_number" => "7") ), array( "location" => array("street_name" => "Derby Road"), "info" => array("status" => "let"), "specs" => array("bedroom_number" =>"5") ), array( "location" => array("street_name" => "Derby Road"), "info" => array("status" => "let"), "specs" => array("bedroom_number" =>"7") ), array( "location" => array("street_name" => "Derby Road"), "info" => array("status" => "available"), "specs" => array("bedroom_number" =>"5") ), array( "location" => array("street_name" => "Derby Road"), "info" => array("status" => "available"), "specs" => array("bedroom_number" =>"7") ) ); function cmp($a, $b) { if ($a["specs"]["bedroom_number"] === $b["specs"]["bedroom_number"]) { return ($a["info"]["status"] !== "let") ? -1 : 1; } return ($a["specs"]["bedroom_number"] > $b["specs"]["bedroom_number"]) ? -1 : 1; } usort($array, "cmp");的某个地方，但我无法修复/发现错误。

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

您的标头设置为100px（导航栏默认为最小高度：50px）并将top ID上的banner属性更改为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;
 
}

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

3 个答案: