Question

我已经在我的页面上成功创建了一个jumbotron，我希望在它之外的jumbotron下面有一些缩略图和东西。然而，即使有一个单独的部分，缩略图不知何故最终在jumbotron内部，因此扩展它让我烦恼：P无论如何解决这个并使jumbotron和缩略图分开？

我的HTML

    <div class="jumbotron">
     <div class="container">
      <h1><font color="#0095f0" face="">Blog!</font></h1>
      <p><font color="#0095f0"><strong>Blah blah blah ect :P</strong></font></p>
      <p><a class="btn btn-primary btn-lg" href="#" role="button">View Blogs!</a></p>
    </div>
    </body>

    <body>
    <div class="row">
    <div class="col-sm-6 col-md-4">
        <div class="thumbnail">
            <img src="https://image.freepik.com/free-icon/question-mark_318-52837.jpg" alt="Annas Blog">
             <div class="caption">
            <h3><font face="Calibri"><strong>The Blog!</strong></font></h3>
            <p><small>View Blog! That's why you're here anyway... right?</small></p>
            <p><a href="https://image.freepik.com/free-icon/question-mark_318-52837.jpg" class="btn btn-primary" role="button">Blogs!</a></p>
          </div>
        </div>
       </div>
    </div>
    </body>

和我的CSS

        .jumbotron {
            margin: 15px 0 30px 0;
            background-image: url("https://image.freepik.com/free-icon/question-mark_318-52837.jpg");
            background-repeat: repeat;
            background-position: 30% 90%;
        }

        .row {
            margin: 0 5px;
        }

然而它出现了这样的情况？请查看链接...

screen capture

请帮我解决这个问题：）

Answer 1

删除额外的身体标签并正确关闭jumbotron div

<div class="jumbotron">
     <div class="container">
      <h1><font color="#0095f0" face="">Blog!</font></h1>
      <p><font color="#0095f0"><strong>Blah blah blah ect :P</strong></font></p>
      <p><a class="btn btn-primary btn-lg" href="#" role="button">View Blogs!</a></p>
    </div>
</div>  // Close it here
    <div class="row">
    <div class="col-sm-6 col-md-4">
        <div class="thumbnail">
            <img src="https://image.freepik.com/free-icon/question-mark_318-52837.jpg" alt="Annas Blog">
             <div class="caption">
            <h3><font face="Calibri"><strong>The Blog!</strong></font></h3>
            <p><small>View Blog! That's why you're here anyway... right?</small></p>
            <p><a href="https://image.freepik.com/free-icon/question-mark_318-52837.jpg" class="btn btn-primary" role="button">Blogs!</a></p>
          </div>
        </div>
       </div>

Answer 2

从.jumbotron CSS中删除以下属性：

background-image: url("https://image.freepik.com/free-icon/question-mark_318-52837.jpg");
background-repeat: repeat;
background-position: 30% 90%;

所以看起来应该是这样的：

    .jumbotron {
        margin: 15px 0 30px 0;
    }

为什么我的引导缩略图在我的Jumbotron中？

2 个答案: