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/以获取有关引导网格的信息。

我的引导容器在另一个上面

2 个答案: