Question

我使这个着陆页工作得很好。背景图片覆盖了页面，看起来很棒。我离开了，一天后又回来了，看起来不一样了。我看不出它的原因。图像根本不会出现在文本后面的标题中（查看图片）。

 <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>

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

看起来你很早就关闭了你的jumbotron DIV。这就是你所拥有的：

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

在</div> DIV结束标记后，将.featured移到上方。

Answer 2

好吧，您的.featured div似乎需要嵌套在具有背景图片的.jumbotron内。目前，您已将其嵌套在.jumbotron之外。

新标记看起来像这样：

<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>

这也会正确地将你的Bootstrap .row置于.container内，就像它想象的那样。

Bootstrap .jumbotron

2 个答案: