モバイルでのブートストラップカラムの重複文字列

Question

私はブートストラップに非常に新しいです（1週間以内の経験のように）、私は厄介な小さな問題に遭遇しました。サイズを変更すると、自分の列の中のテキストが、その下の列の下にあるスライドをソートし始めます。私はそれを自分のコンテナに入れて、.containerからすべてのコンテナを.container-fluidに変更しようとしましたが、何も動作していないようです。

ウェブサイトはhereにアクセスすることができ、関連するコードスニペットは

.table > tbody > tr > td { 
 
    vertical-align: middle; 
 
} 
 
h1 { 
 
    font-family: 'Great Vibes', Helvetica, sans-serif; 
 
    font-size: 50px; 
 
    color: white; 
 
} 
 
.table > tbody > tr:hover { 
 
    background-color: #333333; 
 
}

<div class="col-sm-7" style="background-color: #111313; height: 600px; color: white; min-height: 500px; margin-bottom: 20px"> 
 
    <h1 style="text-align: center;">Sara Manning<br/> Orchestra</h1> 
 
    <iframe class="img-responsive center-block" style="height: 60%; width: 75%" src="https://www.youtube.com/embed/rOjHhS5MtvA" frameborder="0" allowfullscreen></iframe> 
 
    <hr/> 
 
    <p style="word-wrap: break-word; margin-bottom: 40px; width: 75%; margin: auto;"> The Sara Manning Orchestra is a highly trained group of musicians from all over the world. Our orchestra consists of nearly 80 world renowned musicians. Our conductor, Sara Manning, is skilled enough to have conducted The London Symphony Orchestra when their conductor called in sick. Our musicians are really good too. We've got those guys that play those things with the strings, and some girls who play those big metal tubes you blow on. 
 
    <br/> 
 
    </p> 
 
</div> 
 
<div class="col-sm-5" style="background-color: black; min-height: 600px; color: white; border-top-left-radius: 20px; border-bottom-left-radius: 20px;"> 
 
    <h2 style="text-align: center">Upcoming Tourdates</h2> 
 
    <table class="table"> 
 
    <thead> 
 
     <th>Location</th> 
 
     <th>Date</th> 
 
     <th>Ticket Info</th> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td> 
 
      The Kentucky Theatre 
 
      <p class="text-muted">Lexington, KY</p> 
 
     </td> 
 
     <td>Oct. 22</td> 
 
     <td><button class="btn btn-primary">Get Tickets</button></td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      The Civic Auditorium 
 
      <p class="text-muted">Knoxville, TN</p> 
 
     </td> 
 
     <td>Oct. 31</td> 
 
     <td><button class="btn btn-primary">Get Tickets</button></td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      The Sydney Opera House 
 
      <p class="text-muted">Sydney, New South Wales, Australia</p> 
 
     </td> 
 
     <td>Nov. 30</td> 
 
     <td> 
 
      <h3 class="text-danger">Sold Out</h3> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      Bob's House of Music 'n Stuff 
 
      <p class="text-muted">An Undisclosed Basement In Queens, NY</p> 
 
     </td> 
 
     <td>Dec. 25</td> 
 
     <td><button class="btn btn-primary">Get Tickets</button></td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      Batman's Cave 
 
      <p class="text-muted">Gotham, USA</p> 
 
     </td> 
 
     <td>Dec. 31</td> 
 
     <td> 
 
      <h3 class="text-danger">Sold Out</h3> 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div> 
 
</div>

Answer 1

下回っているあなたのcol-sm-7からheight: 600px;を削除します。おそらくmin-heightが欲しいですか？ col-sm-7のコンテンツが600pxを超えると、それは常に600pxの高さに強制されるので、その下のdivは重複します。

.table > tbody > tr > td { 
 
    vertical-align: middle; 
 
} 
 
h1 { 
 
    font-family: 'Great Vibes', Helvetica, sans-serif; 
 
    font-size: 50px; 
 
    color: white; 
 
} 
 
.table > tbody > tr:hover { 
 
    background-color: #333333; 
 
}

<!-- remove height: 600px; --> 
 
<div class="col-sm-7" style="background-color: #111313; color: white; min-height: 500px; margin-bottom: 20px"> 
 
    <h1 style="text-align: center;">Sara Manning<br/> Orchestra</h1> 
 
    <iframe class="img-responsive center-block" style="height: 60%; width: 75%" src="https://www.youtube.com/embed/rOjHhS5MtvA" frameborder="0" allowfullscreen></iframe> 
 
    <hr/> 
 
    <p style="word-wrap: break-word; margin-bottom: 40px; width: 75%; margin: auto;"> The Sara Manning Orchestra is a highly trained group of musicians from all over the world. Our orchestra consists of nearly 80 world renowned musicians. Our conductor, Sara Manning, is skilled enough to have conducted The London Symphony Orchestra when their conductor called in sick. Our musicians are really good too. We've got those guys that play those things with the strings, and some girls who play those big metal tubes you blow on. 
 
    <br/> 
 
    </p> 
 
</div> 
 
<div class="col-sm-5" style="background-color: black; min-height: 600px; color: white; border-top-left-radius: 20px; border-bottom-left-radius: 20px;"> 
 
    <h2 style="text-align: center">Upcoming Tourdates</h2> 
 
    <table class="table"> 
 
    <thead> 
 
     <th>Location</th> 
 
     <th>Date</th> 
 
     <th>Ticket Info</th> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td> 
 
      The Kentucky Theatre 
 
      <p class="text-muted">Lexington, KY</p> 
 
     </td> 
 
     <td>Oct. 22</td> 
 
     <td><button class="btn btn-primary">Get Tickets</button></td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      The Civic Auditorium 
 
      <p class="text-muted">Knoxville, TN</p> 
 
     </td> 
 
     <td>Oct. 31</td> 
 
     <td><button class="btn btn-primary">Get Tickets</button></td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      The Sydney Opera House 
 
      <p class="text-muted">Sydney, New South Wales, Australia</p> 
 
     </td> 
 
     <td>Nov. 30</td> 
 
     <td> 
 
      <h3 class="text-danger">Sold Out</h3> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      Bob's House of Music 'n Stuff 
 
      <p class="text-muted">An Undisclosed Basement In Queens, NY</p> 
 
     </td> 
 
     <td>Dec. 25</td> 
 
     <td><button class="btn btn-primary">Get Tickets</button></td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      Batman's Cave 
 
      <p class="text-muted">Gotham, USA</p> 
 
     </td> 
 
     <td>Dec. 31</td> 
 
     <td> 
 
      <h3 class="text-danger">Sold Out</h3> 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>