2017-09-27 146 views
0

我對Bootstrap很新穎(因爲在不到一週的時間裏),我遇到了一個煩人的小問題。在調整大小時,我的一列中的文本開始在它下面的列下排序。我嘗試將文本放在它自己的容器中,並將所有容器從.container-fluid更改爲.container,但似乎沒有任何效果。Bootstrap列在手機上重疊文本

網站可以訪問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>

+0

感謝您的編輯。我很抱歉,我仍然是Stack Overflow的新手。 – jmknight2

+0

沒問題。我喜歡格式良好的代碼,因爲它更易於閱讀。我通過https://www.freeformatter.com/html-formatter.html和https://www.cleancss.com/css-beautify/傳遞它,然後將其放入代碼片段中。 – Jonathan

回答

1

col-sm-7取出height: 600px;。也許你想要一個min-height?由於您強制將其始終設置爲600px,因此當col-sm-7中的內容大於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>

+1

非常感謝!這工作完美!我不敢相信我忽略了... – jmknight2