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>
感谢您的编辑。我很抱歉,我仍然是Stack Overflow的新手。 – jmknight2
没问题。我喜欢格式良好的代码,因为它更易于阅读。我通过https://www.freeformatter.com/html-formatter.html和https://www.cleancss.com/css-beautify/传递它,然后将其放入代码片段中。 – Jonathan