我的引導程序容器在另一個之上

Question

我正在開發一個主頁，目前爲止，有2個引導程序容器。會發生什麼是，第二個出現在第一個之上，而不是之後。我在這裏做錯了什麼？

<!-- hero cover --> 
<div class="container-fluid hero-cover"> 

    <img src="images/cover-odonto.jpg" class="img-responsive"> 

    <div class="row"> 
    <div class="col-md-12 cover-text"> 
     <h1>Some Text</h1> 
     <h3> Some secondary text</h3> 
    </div> <!--/col --> 
    </div> <!--/row --> 

    <!-- pricing tables --> 
    <div class="row"> 
      <div class="col-md-5 col-sm-6"> 
      <ul class="price"> 
       <li></li> 
       <li></li> 
       <li></li>    
      </ul> 
      </div> <!--/col --> 

      <div class="col-md-5 col-sm-6"> 
      <ul class="price"> 
       <li></li> 
       <li></li> 
       <li></li>    
      </ul> 
      </div> <!--/col --> 
    </div><!--/row --> 

</div> <!--/container --> 


<!-- beneficios --> 

<div class="container beneficios-table"> 

    <div class="row"> 
    <div class="col-sm-12"> 
     <p><h2>Some title here</h2></p> 
    </div> <!--/col --> 
    </div> <!--/row --> 

    <div class="row"> 
    <div class="col-sm-12"> 
     <p><h3>Another Title</h3></p> 
     <p><h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</h4></p> 
    </div> <!--/col --> 
    </div> <!--/row --> 

</div> <!--/container --> 

而CSS：

/* Nav --------------------- */ 
.logo-odonto { 
    max-width: 200px; 
} 


.navbar-header { 
    height: 100px; 
} 


/* Cover --------------------- */ 

.hero-cover { 
    position: relative; 
} 

.cover-text { 
    position: absolute; 
    z-index: 1; 
    top: 10%; 
    left: 6%; 
} 

.text-white { 
    color: #ffffff; 
} 


/* Pricing --------------------- */ 



/* Style the list */ 
.price { 
    list-style-type: none; 
    border: 1px solid #eee; 
    margin: 0; 
    padding: 0; 
    -webkit-transition: 0.3s; 
    transition: 0.3s; 
    background-color: white; 
    position: absolute; 
    right: 5px; 
    left: 5px; 
    top: -100px; 

} 

/* Add shadows on hover */ 
.price:hover { 
    box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2) 
} 

/* Pricing header */ 
.price .price-header { 
    background-color: orange; 
    color: white; 
    font-size: 25px; 
} 

/* List items */ 
.price li { 
    border-bottom: 1px solid #eee; 
    padding: 20px; 
    text-align: center; 
} 


/* The "Sign Up" button */ 
.button { 
    background-color: #4CAF50; 
    border: none; 
    color: white; 
    padding: 10px 25px; 
    text-align: center; 
    text-decoration: none; 
    font-size: 18px; 
} 




/* Beneficios e Diferenciais --------------------- */ 

.beneficios-table { 
    background-color: white; 
    padding: 10rem; 
    position: relative; 
} 

在此先感謝。

Answer 1

你col-md-5加起來還不到12，你可以將其更改爲col-md-6或加2空白col-md-1因爲我在下面做：

<!-- hero cover --> 
 
<div class="container-fluid hero-cover"> 
 

 
    <img src="images/cover-odonto.jpg" class="img-responsive"> 
 

 
    <div class="row"> 
 
    <div class="col-md-12 cover-text"> 
 
     <h1>Some Text</h1> 
 
     <h3> Some secondary text</h3> 
 
    </div> <!--/col --> 
 
    </div> <!--/row --> 
 

 
    <!-- pricing tables --> 
 
    <div class="row"> 
 
     <div class="col-md-1"></div> 
 
      <div class="col-md-5 col-sm-6"> 
 
      <ul class="price"> 
 
       <li></li> 
 
       <li></li> 
 
       <li></li>    
 
      </ul> 
 
      </div> <!--/col --> 
 

 
      <div class="col-md-5 col-sm-6"> 
 
      <ul class="price"> 
 
       <li></li> 
 
       <li></li> 
 
       <li></li>    
 
      </ul> 
 
      </div> <!--/col --> 
 
      <div class="col-md-1"></div> 
 
     </div><!--/row --> 
 

 
</div> <!--/container --> 
 

 

 
<!-- beneficios --> 
 

 
<div class="container beneficios-table"> 
 

 
    <div class="row"> 
 
    <div class="col-sm-12"> 
 
     <p><h2>Some title here</h2></p> 
 
    </div> <!--/col --> 
 
    </div> <!--/row --> 
 

 
    <div class="row"> 
 
    <div class="col-sm-12"> 
 
     <p><h3>Another Title</h3></p> 
 
     <p><h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</h4></p> 
 
    </div> <!--/col --> 
 
    </div> <!--/row --> 
 

 
</div> <!--/container -->`

Answer 2

你可以看看這個鏈接http://v4-alpha.getbootstrap.com/layout/grid/瞭解有關自舉網格的信息。