为什么 nav 和 div （背景图像）之间出现空间？答案

【问题标题】：Why space is appearing between nav and div (background image)?为什么 nav 和 div （背景图像）之间出现空间？
【发布时间】：2018-11-28 05:12:59
【问题描述】：

我正在将现有网站转换为响应式网站。我正在使用引导程序并第一次这样做。我得到了导航和 div 之间的空间。背后的原因是什么？我是 Bootstrap 的新手。

标记：

<div class="container-fullwidth example2">
    <nav class="navbar navbar-default navbar-static-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button 
                    type="button" 
                    class="navbar-toggle collapsed" 
                    data-toggle="collapse" 
                    data-target="#navbar2">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="http://disputebills.com">
                    <img src="images/layout/check.png" 
                        style="width:451px;height:36px;" 
                        class="img-responsive" 
                        alt="dubaiexporters.com"/>
                </a>
            </div>
            <div id="navbar2" class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Advertise</a></li>                           
                    <li class="dropdown">
                        <a href="#" 
                            class="dropdown-toggle" 
                            data-toggle="dropdown" 
                            role="button" 
                            aria-expanded="false">Exhibitions 
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">Trade fairs in U.A.E</a></li>
                            <li><a href="#">Trade fairs worldwide</a></li>
                            <li><a href="#">Add Your Event</a></li>             
                        </ul>
                    </li>
                    <li><a href="#">Memberships</a></li>
                    <li><a href="#">About us</a></li>
                    <li><a href="#">News</a></li>
                    <li><a href="#">Contact us</a></li>
                    <li><a href="#">Partners</a></li>
                </ul>
            </div>
            <!--/.nav-collapse -->
        </div>
        <!--/.container-fluid -->
    </nav>
    <div id="backgroundimage"></div> 
</div>

CSS：

#backgroundimage {
    background-image: url("https://d12dkjq56sjcos.cloudfront.net/pub/media/wysiwyg/Dubai-Skyline-Burj-Al-Arab-Big-Bus-Tours-01.17.jpg");
    width: 100vw;
    height: 100vh; 
    background-size:100% 100%;
    background-repeat: no-repeat;
    position: relative;
    max-width:100%;
}

【问题讨论】：

不指定高度，将高度设置为自动，宽度设置为 100%。

标签： css asp.net twitter-bootstrap

【解决方案1】：

几乎不可能有人给您一个真正解决您的问题的答案...因为他们无法调试/检查您页面的 css - 即使有人这样做，他们也无法确定它是否有效直到你检查它 - 等等......

但后来我认为这是"give a man a fish and you feed him for a day; teach a man to fish and you feed him for a lifetime"

我会给你一个教程，告诉你如何找到你自己为什么会有这个空白。

主要思想是使用浏览器工具检查您的页面及其上的 css，并对其进行实时更改以查找原因...查看此页面以获取有关该内容的启动教程

Inspect and Edit Pages and Styles

Get Started With Viewing And Changing CSS

【讨论】：

嗯...这是可能的。我在这里提供了所需的一切......无论如何......我找到了答案......感谢stackoverflow.com/questions/30173890/….. .
@chetankambli 从我在答案中看到的.navbar 是你需要改变的——这不是你的问题，所以你从他们的经验中得到答案......一个很好的猜测......

【解决方案2】：

这对我有用..

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

【讨论】：

【解决方案3】：

因为 Bootstrap 将下面的 20px 边距设置为 .navbar

.navbar {
position: relative;
min-height: 50px;
margin-bottom: 20px;
border: 1px solid transparent;
}

我希望下面的截图能帮助你找出问题。

![1]:https://i.stack.imgur.com/euqV9.png

您应该使用 0px 覆盖该边距属性，如下所示

.navbar {
   margin-bottom: 0px;
}

【讨论】：