Question

我有100％宽度的表格，连续三张图片。我希望表格能够响应并在没有足够空间时将图片堆叠成一列。

我目前的问题是，如果浏览器窗口宽度最小化或者在手机上查看页面，则表格元素不会叠加到一列中，因此右侧的图片变得不可见。

我的代码如下所示：

<!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>

Answer 1

在引导程序中，您无法使用表格来管理列中的内容，因为您需要<div>具有适当类别的此功能。

try this

<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>

Answer 2

最后，根据http://getbootstrap.com/examples/grid

中的三个相等列示例，我使用javafx.*元素编写了它

<div>

如何将窗口上的表格行重新调整为一列？

2 个答案: