我正在使用Bootstrap來創建自定義網站,但我遇到了問題。我的橫幅和導航欄之間有一個很大的空間。我需要刪除它而不會破壞別的東西。
我正在尋找修復這個網站和其他網站上,但都沒有工作。下面的代碼:刪除導航欄和橫幅之間的空格
HTML:http://pastebin.com/FSFA4GhG CSS:http://pastebin.com/TiQ1nm9h
我想通了,問題是在<header>
地方,但我不能修復/發現錯誤。
我正在使用Bootstrap來創建自定義網站,但我遇到了問題。我的橫幅和導航欄之間有一個很大的空間。我需要刪除它而不會破壞別的東西。
我正在尋找修復這個網站和其他網站上,但都沒有工作。下面的代碼:刪除導航欄和橫幅之間的空格
HTML:http://pastebin.com/FSFA4GhG CSS:http://pastebin.com/TiQ1nm9h
我想通了,問題是在<header>
地方,但我不能修復/發現錯誤。
你有報頭組在100px下(導航欄默認爲最小高度: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>
謝謝!非常感謝你!你幫了我很多! –
沒問題,很高興我能幫到你! – vanburen
很簡單,只是從你的#header
刪除height屬性,並把正確的頂級物業在您#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>
非常感謝! –
嘗試添加
nav {
margin: 0px !important;
}
以及編輯旗幟規則
#banner {
width: 100%;
height: 500px;
position: fixed;
top: 50px;
background: #AE1;
}
請在您的問題中發佈您的代碼。 – j08691