bootstrap、新しいdivセクションを開始できません。重複しています

Question

私はカルーセル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; */ 
} 

を設定する（Iスライドショーの高さは、バナー画像のサイズ/アスペクト比に依存すると思います）

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>