我将如何消除图像和Bootstrap导航栏之间的差距？ [英] How would I remove the gap between the image and the Bootstrap Nav bar?
本文介绍了我将如何消除图像和Bootstrap导航栏之间的差距？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
<！DOCTYPE html>
< html>
< head>
< title> AwakenNetwork< / title>
< meta name =viewportcontent =width = device-width，initial-scale = 1.0>
< link href =css / bootstrap.min.css =stylesheet>
< link href =css / styles.css =stylesheet>
< / head>
< body>
< div id =wrap>
< div class =navbar navbar-default>
< div class =container>
< a href =＃class =navbar-brand> AwakenNetwork< / a>
< button class =navbar-toggledata-toggle =collapsedata-target =.navHeaderCollapse>
< span class =icon-bar>< / span>
< span class =icon-bar>< / span>
< span class =icon-bar>< / span>
< / button>
< div class =collapse navbar-collapse navHeaderCollapse>
< ul class =nav navbar-nav navbar-right>
< li class =active>< a href =＃>< span class =glyphicon glyphicon-home>< / span>家庭及LT; / A>< /锂>
< li>< a href =＃>< span class =glyphicon glyphicon-bullhorn>< / span>论坛< / A>< /锂>
< li>< a href =＃>< span class =glyphicon glyphicon-gift>< / span>表决< / A>< /锂>
< li>< a href =＃>< span class =glyphicon glyphicon-tower>< / span>人员< / A>< /锂>
< li>< a href =＃>< span class =glyphicon glyphicon-book>< / span>排名< / A>< /锂>
< li>< a href =＃>< span class =glyphicon glyphicon-shopping-cart>< / span>商店和LT; / A>< /锂>
< / ul>
< / div>
< / div>
< / div>
< / div>
< div style =height：365px; background：url（'https://dl.dropboxusercontent.com/s/246mjb1z7mahfe2/img1.jpg'）; position：relative>
< div class =carousel-captionstyle =bottom：15px>
< h1 style =font-size：100pt> Awaken Network< / h1>
< h1>被唤醒......< / h1>
< / div>
解决方案
你做得对，确保你使用
.navbar {margin-bottom：0px！important; }
.carousel-caption {margin-top：0px！important}
The carousel is not touching the navbar as you can see. I would like to remove the margin in between it. I've tried using negative margins, they don't seem to work. Anyone here that can help me? http://i.stack.imgur.com/1htJM.png
<!DOCTYPE html>
<html>
<head>
<title>AwakenNetwork</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href = "css/bootstrap.min.css" rel = "stylesheet">
<link href = "css/styles.css" rel = "stylesheet">
</head>
<body>
<div id="wrap">
<div class = "navbar navbar-default">
<div class = "container">
<a href = "#" class ="navbar-brand">AwakenNetwork</a>
<button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
<div class ="collapse navbar-collapse navHeaderCollapse">
<ul class = "nav navbar-nav navbar-right">
<li class = "active"><a href = "#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
<li><a href = "#"><span class="glyphicon glyphicon-bullhorn"></span> Forums</a></li>
<li><a href = "#"><span class="glyphicon glyphicon-gift"></span> Vote</a></li>
<li><a href = "#"><span class="glyphicon glyphicon-tower"></span> Staff</a></li>
<li><a href = "#"><span class="glyphicon glyphicon-book"></span> Rankings</a></li>
<li><a href = "#"><span class="glyphicon glyphicon-shopping-cart"></span> Store</a></li>
</ul>
</div>
</div>
</div>
</div>
<div style="height: 365px; background: url('https://dl.dropboxusercontent.com/s/246mjb1z7mahfe2/img1.jpg'); position: relative">
<div class="carousel-caption" style="bottom: 15px">
<h1 style="font-size: 100pt">Awaken Network</h1>
<h1>Be Awakened..</h1>
</div>
解决方案
you're doing it right, make sure you use
.navbar { margin-bottom:0px !important; }
.carousel-caption { margin-top:0px !important }
这篇关于我将如何消除图像和Bootstrap导航栏之间的差距？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
![http://i.stack.imgur.com/1htJM.png](\"http://i.stack.imgur.com/1htJM.png\"){kind=link}
