html - Bootstrap ，无法启动新的 div 部分，重叠

Question

我有一个旋转木马 div 部分，我试图在 div 中的它下面添加另一个白色条，但它总是在 div 的中间结束，而不是在它下面的新部分中。这是我的编码和 CSS 帮助。

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.container1 {
  margin-left: 15%;
  margin-top: 9%;
}
.container1img1 {
  margin-left: 15%;
}
.container1img2 {
  margin-left: -24%;
  margin-top: -10%;
}
.container {
  float: left;
  display: block;
  margin-top: 5%;
}
.demo-content img {
  display: block;
  margin-right: 5%;
}
.set4 {
  width: 100%
}
.set4 > .row > .col-md-12 {
  background-color: black;
  height: 250px;
}
.set4 h2 {
  color: #FFFFFF;
}
.set3 {
  margin-bottom: 4%;
}
.col-md-3 {
  padding: 0px !important;
}
.set5 > .row > .col-md-12 {
  background-color: #FFFFFF;
  height: 60px;
}
.set6 > .row > .col-md-12 {
  background-color: #FFFFFF;
  height: 200px;
}

<div class=".container-fluid">
  <div class="set5">
    <div class="row">
      <div class="col-md-12 text-center">

      </div>
    </div>
  </div>
</div>
<div class="container-fluid second-content">
  <div class="set6">
    <div class="row">
      <div class="col-md-12">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
          <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
          </ol>
          <div class="carousel-inner">
            <div class="item active">
              <img src="http://placehold.it/480x320" alt="First slide">
              <div class="carousel-caption">
                <h3></h3>
                <p></p>
              </div>
            </div>
            <div class="item">
              <img src="http://placehold.it/480x320" alt="Second slide">
              <div class="carousel-caption">
                <h3></h3>
                <p></p>
              </div>
            </div>
            <div class="item">
              <img src="http://placehold.it/480x320" alt="Third slide">
              <div class="carousel-caption">
                <h3></h3>
                <p></p>
              </div>
            </div>
          </div>

          <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
          <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
        </div>
      </div>
    </div>
  </div>
</div>

<div id="push">
</div>
<div class=".container-fluid">
  <div class="set5">
    <div class="row">
      <div class="col-md-12 text-center">

      </div>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

Answer 1

尝试删除上一个规则集中的高度

.set6 > .row > .col-md-12 {
  background-color: #FFFFFF;
  /* height: 200px; */
}

(我认为幻灯片放映的高度将取决于横幅图片的大小/纵横比)