Question

这是我的索引页面的标记。我有jumbotron，下面是row，应显示在jumbotron下方。但它不是，它出现在jumbotron之上由于某种原因我无法弄清楚。（我在bootstrap方面几乎没有经验）

  <div class="jumbotron jumbotron-billboard">
  <div class="img"></div>
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <h1>Jumbotron</h1>
                <p>
                    Lorem ipsum is the best
                </p>
                <a href="#" class="btn btn-success btn-lg">Sign Up</a>
            </div>
        </div>
    </div>
</div>



  <div class="row main-row">
    <div class="col-md-3">
   text1
    </div>

     <div class="col-md-3">
    text2
    </div>

     <div class="col-md-3">
   text3
    </div>

      <div class="col-md-3">
    text4
    </div>
  </div>

以下是.css

的jumbotron

.jumbotron-billboard .img {
    margin-bottom: 0px;

    opacity: 0.8;
    color: #fff;
    background: #000 url("gogn1.jpg") center center;

    width: 100%;
    height: 50vh;
    background-size: cover;
    overflow: hidden;


  position:absolute;
  top:0;left:0;
  z-index:1;
}
.jumbotron {position:relative;padding:50px;}
.jumbotron .container {z-index:2;
 position:relative;
  z-index:2;
}

如果有人可以告诉我为什么行不会出现在jumbotron下面，那将是非常好的。

这里有一个问题的链接，这是bootply.com/9vxeaMQ6Xf问题的bootply

出现在jumbotron顶部的Bootstrap行应该在jumbotron下面

0 个答案: