Question

我正在将现有网站转换为响应式网站。我正在使用bootstrap并且是第一次这样做。我正在获得导航和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%;
}

Answer 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

Answer 2

这对我有用..

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

Answer 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写下这个margin属性，如下所示

.navbar {
   margin-bottom: 0px;
}

为什么导航和div（背景图像）之间出现空间？

3 个答案: