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; */
}

（我认为幻灯片放映的高度取决于横幅图片的大小/宽高比）

Answer 2

您需要评论此高度属性。它告诉大家旋转木马结束的地方。它说谎了。

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

@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; */
}

.carousel,
.carousel .item,
.carousel-inner > .item > img {
  height: 360px;
}
.carousel .item {
  background-color: #777;
}
.carousel-inner > .item > img {
  min-width: 100%;
}

.bg-yellow {
  background-color: #ff9 !important;
}
.bg-orange {
  background-color: #f90 !important;
}
.bg-magenta {
  background-color: #f9f !important;
}

<div class=".container-fluid">
  <div class="set5">
    <div class="row">
      <div class="col-md-12 text-center bg-yellow">
        <h3>sec5</h3>
      </div>
    </div>
  </div>
</div>

<div class="container-fluid second-content">
  <div class="set6">
    <div class="row">
      <div class="col-md-12 bg-magenta">
        <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="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">
              <div class="carousel-caption">
                <h3>First slide</h3>
                <p></p>
              </div>
            </div>
            <div class="item">
              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide">
              <div class="carousel-caption">
                <h3>Second slide</h3>
                <p></p>
              </div>
            </div>
            <div class="item">
              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide">
              <div class="carousel-caption">
                <h3>Third slide</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 bg-orange">
        <h3>sec5</h3>
      </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>

bootstrap，无法获得新的div部分启动，重叠

2 个答案: