Question

您可以看到旋转木马未触及导航栏。我想删除它之间的边距。我尝试过使用负边距，它们似乎不起作用。这里有人可以帮助我吗？ 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>

Answer 1

你做得对，确保你使用

.navbar { margin-bottom:0px !important; }
.carousel-caption { margin-top:0px !important }

Answer 2

保证金：导航ul上的0：

HTML

<ul class="nav navbar-nav navbar-right">

CSS

ul.nav{
  margin: 0;
}

（或者在保证金顶部至少为0）

Answer 3

.navbar { margin-bottom:0px !important; }

如何消除图像和Bootstrap Nav栏之间的差距？

3 个答案: