我有一个 100% 宽度的表格，其中连续三张图片。我希望表格能够响应并在空间不足时将图片堆叠到一列中。
我目前的问题是，如果浏览器窗口宽度最小化或在手机上查看页面，表格元素不会堆叠成一列，因此右侧的图片变得不可见。
我的代码是这样的:
http://codepen.io/anon/pen/jPYyeK
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<style type="text/css">
.Table-Upper {
width: 100%;
text-align: center;
}
</style>
</head>
<body>
<div class="col-sm-2">
<div class="list-group">
<a href="#" class="list-group-item active">Start</a>
<a href="Foo.html" class="list-group-item">Foo</a>
</div>
</div>
<div class="col-sm-10">
<table class="Table-Upper">
<tr>
<td><img id="upper-pics" src="p1.jpg" width="200"></td>
<td><img id="upper-pics" src="p2.png" width="100"></td>
<td><img id="upper-pics" src="p3.jpg" width="200"></td>
</tr>
</table>
</div>
</body>
</html>
最佳答案
在 bootstrap 中，您不能使用表来管理列中的内容，因为您需要此功能 <div>与适当的类。
<div class="col-sm-2">
<div class="list-group">
<a href="#" class="list-group-item active">Start</a>
<a href="Foo.html" class="list-group-item">Foo</a>
</div>
</div>
<div class="col-sm-10 col-xs-4">
<div class"row">
<div class="col-md-3"><img id="upper-pics" src="p1.jpg" width="200"> </div>
<div class="col-md-4"><img id="upper-pics" src="p2.png" width="100"></div>
<div class="col-md-3" ><img id="upper-pics" src="p3.jpg" width="200"></div>
</div>
</div>
关于html - 如何将调整窗口大小的表行堆叠到一列中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31090361/