Bootstrap .jumbotron

Question

I made this landing page which worked fine. 我做了这个登陆页面，效果很好。 The background image covered the page and it looked great. 背景图像覆盖了页面，看起来很棒。 I left it and came back a day later and it looks different. 我离开了它，并在一天后回来，看上去却有所不同。 I can't see the reason for it. 我看不出原因。 The image wont appear behind the text at all only in the header (check the picture). 图像完全不会出现在文本的后面，仅出现在标题中（检查图片）。

 <body>  
      <div class="jumbotron">
        <div class="container">
                <img src="images/logo1.png" class="logo img-responsive" align="right">
            </div>
          </div>

<!-- featured content -->
        <div class="featured">

<!--  row for grid system / limit space taken by featured content -->
        <div class="row">

<!-- use only 9 columns out of 12 for medium and large devices -->
        <div class="col-md-9">

              <h1> Christopher McConney</h1> <br> <br>
              <h3> A creative front end web developer <br> Specialising in responsive and dynamic web pages</h3><br><br>
              <p>
              <a class="btn btn-default btn-lg" href="index.html"> Find out more </a>  
              </p>
            </div>

          </div>
        </div>
<!-- footer-->
    <div class="footer">
      <div class="container">
        <p align="right"> &copy; Developed by Christopher McConney 2018 </p> 
      </div>
    </div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>

The CSS is as follows: CSS如下：

.jumbotron {
    background: url(images/background.jpeg) center center ;
    background-size:100% 100%;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/*logo position and size*/
.logo{
    width:85px;
    height:65px;
}

.jumbotron logo{
margin-right: 30px;   
margin-top: 10px;
}

/*set text colour*/
.featured{ 
    color:lightgrey;
    margin-left: 10px;
}

/* space between logo and title */
.featured h1{
    padding-top: 60px
}

/*style button*/

.featured .btn-default{
    font-weight:bold;
    color: lightgrey;
    background-color: darkgrey;
    border-radius: 10px;
    margin-top: 20px;
    align-content:center
}

/*style footer*/
.footer{
    background-color:rgba(0, 0, 0, 0.5);
    color:darkgray;
    font-size: 15px;
    padding:10px; 0px;
    position: absolute;
    right: 0;
    bottom:0;
    left:0;
}

Answer 1

It looks like you closed your jumbotron DIV early. 您好像早早关闭了超大型DIV。 This is what you have: 这是您所拥有的：

 <div class="jumbotron">
    <div class="container">
            <img src="images/logo1.png" class="logo img-responsive" align="right">
        </div>
      </div>

Move both </div> above after the .featured DIVs closing tag. 将两个</div>都.featured DIVs关闭标记之后。

Answer 2

Well it seems that your .featured div needs to be nested inside your .jumbotron which has the background image. 好吧，似乎您的.featured div需要嵌套在具有背景图像的.jumbotron内。 Currently you have it nested outside of the .jumbotron . 目前，您已将其嵌套在.jumbotron之外。

The new markup would look like this: 新的标记如下所示：

<div class="jumbotron">
    <div class="container">
        <img src="images/logo1.png" class="logo img-responsive" align="right">

        <div class="featured">

            <!--  row for grid system / limit space taken by featured content -->
            <div class="row">

                <!-- use only 9 columns out of 12 for medium and large devices -->
                <div class="col-md-9">

                    <h1> Christopher McConney</h1> <br> <br>
                    <h3> A creative front end web developer <br> Specialising in responsive and dynamic web pages</h3><br><br>
                    <p>
                        <a class="btn btn-default btn-lg" href="index.html"> Find out more </a>
                    </p>
                </div>

            </div>
        </div>
    </div>
</div>

<!-- featured content -->

<!-- footer-->
<div class="footer">
    <div class="container">
        <p align="right"> &copy; Developed by Christopher McConney 2018 </p>
    </div>
</div>

This will also correctly place your Bootstrap .row inside the .container like it's suppose to be. 这也将正确地将您的Bootstrap .row放置在.container如.container那样。

Bootstrap .jumbotron

问题描述

2 个解决方案

解决方案1
2 2018-03-08 18:08:48

解决方案2
1 已采纳 2018-03-08 18:07:24

Bootstrap .jumbotron

问题描述

2 个解决方案

解决方案1 2 2018-03-08 18:08:48

解决方案2 1 已采纳 2018-03-08 18:07:24

解决方案1
2 2018-03-08 18:08:48

解决方案2
1 已采纳 2018-03-08 18:07:24