html - 使用 Bootstrap 流下表

Question

我有一个响应式 Bootstrap 表(1 tr 和 3 td)，当涉及到 xs 设备时，我希望它们向下流动。

<div class="container-fluid" id="maincontent">

<div class="table-responsive">
<table class="table"><tr><td>

<div class="thumbnail" id="tropthumb">
<img src="images/mainconimg/trophy.jpg" alt="trophies" id="mainconimg">
<div class="caption">
<h3 id="trop">Trophies</h3>
<p><a href="trophies.html" class="btn btn-primary" id = "btnview" role="button">View</a></p>
</div>
</div>
</td>

<td>
<div class="thumbnail" id = "medalthumb">
<img src="images/mainconimg/medals.jpg" alt="trophies" id="mainconimg2">
<div class="caption">
<h3 id="medal">Medals</h3>
<p><a href="medals.html" class="btn btn-primary" id = "btnview2" role="button">View</a></p>
</div>
</div>
</td>

<td>          
<div class="thumbnail" id = "souvnthumb">
<img src="images/mainconimg/souvn.jpg" alt="trophies" id="mainconimg3">
<div class="caption">
<h3 id="souvn">Souvenirs</h3>
<p><a href="souvenirs.html" class="btn btn-primary" id = "btnview3" role="button">View</a></p>
</div>
</div>
</td></tr></table>

</div>
</div>

**我有一张单行表格，上面有 3 个 td，每个 td 都包含一个缩略图。当涉及到 xs 设备时，我希望它们像示例图片中那样向下流动，请帮助我。

this is what i wanted to look like when it comes to xs devices

Answer 1

您是否出于特定目的使用表？因为如果没有，您可以在 Bootstrap 上使用 grid。

例如

<div class="row">
 <div class="col-md-4 col-xs-12"> "your image here" </div>
 <div class="col-md-4 col-xs-12"> "your image here" </div>
 <div class="col-md-4 col-xs-12"> "your image here" </div>
</div>

但是您可以省略代码 col-xs-12，因为我认为如果您调整屏幕大小时 col-md-4 会自动将它们向下排列。