Question

我正在设计一个Bootstrap网站。我在导航栏下面添加了标题导航栏和背景图片。所以在添加背景图片后，我无法添加任何内容。我尝试在图片下方添加段落，但没有显示任何内容。

代码：

<html>
<body>
    <form id="form1" runat="server">
    <%--<div>
        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

        </asp:ContentPlaceHolder>
    </div>--%>
                <div class="container-fullwidth example2">
                   <nav class="navbar navbar-default navbar-fixed-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 -->
                        <div id="backgroundimage"></div>


              </nav>


          </div>

         <div id="container">
                                        <div id="content">
                                            <div id="leftcontent">

                                               <asp:ContentPlaceHolder ID="sidecontentholder" runat="server">
                                                </asp:ContentPlaceHolder>
                                            </div>
                                            <!--Start Main Content  -->
                                            <div id="rightcontent">
                                                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                                                </asp:ContentPlaceHolder>
                                            </div>
                                        </div>
                                        <!--Start Main Content  -->
                                    </div>





    </form>
</body>

</html>

CSS：

body {
      font-family: "Lato";
}

html,body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
}


.example2 .navbar-brand>img {
  padding: 7px 15px;
}

.navbar-brand {
  padding: 0px;
}
.navbar-brand>img {
  height: 100%;
  padding: 15px;
  width: auto;
}
html > body{
min-height:100%;
height:auto;

}

#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%;

} 

#leftcontent{
    display:inline;
    padding-left: 3px;
    padding-bottom: 20px;
    width: 165px;

    float: left;
    overflow:visible !important;
    overflow:hidden;
}

请检查JS Fiddle上的代码：https://jsfiddle.net/ruc9dbs7/3/

我是Bootstrap的新手。

Answer 1

<div id="backgroundimage"></div>

这应该在</nav>

之外

<nav>
......
......
</nav>
<div id="backgroundimage"></div>

无法在背景图片后添加任何内容

1 个答案: