CSS Bootstrap : how do I keep side by side div keep content height equals on resize?

Question

我遇到了一种我一直在研究的垂直 slider 的问题。问题是，当我更改显示分辨率时，右侧缩略图的高度与左侧图片的高度不同。很难用文字来解释，所以我做了一个代码笔来帮助我更好地理解它。是这样的:

https://codepen.io/fmalmeida/pen/ZOOagX

.container2 {
  background-color: grey;
}
.container1 {
  background-color: magenta;
  position: absolute;
  max-height: 609px;
  overflow: hidden;
}
.lSection {
  background-color: blue;
  position: relative;
  max-height: 609px;
}
.rSection {
  background-color: green;
  position: relative;
  max-height: 609px;
}
.lSection>* {
  min-width: 100%;
  /*   min-height: 609px; */
}
.rSection>ul {
  max-height: 609px;
}
.rSection>ul img {
  max-height: 150px;
}
li {
  padding-bottom: 2px;
  list-style: none;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" />


<div class="container2 row-fluid">
  <div class="container1 span10">
    <div class="lSection span9">
      <img class="contain" src="http://mw2.google.com/mw-panoramio/photos/medium/58122377.jpg">
    </div>
    <div class="rSection span3">
      <ul>
        <li>
          <a>
            <img src="http://cdn.olhares.pt/client/files/foto/big/330/3301699.jpg">
          </a>
        </li>
        <li>
          <a>
            <img src="http://cdn.olhares.pt/client/files/foto/big/330/3301699.jpg">
          </a>
        </li>
        <li>
          <a>
            <img src="http://cdn.olhares.pt/client/files/foto/big/330/3301699.jpg">
          </a>
        </li>
        <li>
          <a>
            <img src="http://cdn.olhares.pt/client/files/foto/big/330/3301699.jpg">
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

要进行测试，您只需调整浏览器窗口的大小。在更高的分辨率下看起来不错，因为我已经定义了最大高度。当您将窗口调整为较低的分辨率时，您会看到我的问题发生。

谁能告诉我如何同时调整主图像和缩略图的大小以及相同的高度？

谢谢。

Answer 1

这是因为您使用的是 Bootstrap 版本 2。

如果你看一下他们的例子 provide ，您可以看到这是预期的行为。调整他们网站的大小，您会看到 span1-span11 的容器跳到全宽。

相反，我建议您升级 Bootstrap，或为移动网站创建您自己的实现。

布局表:

<table class="table table-bordered table-striped">
            <thead>
              <tr>
                <th>Label</th>
                <th>Layout width</th>
                <th>Column width</th>
                <th>Gutter width</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Large display</td>
                <td>1200px and up</td>
                <td>70px</td>
                <td>30px</td>
              </tr>
              <tr>
                <td>Default</td>
                <td>980px and up</td>
                <td>60px</td>
                <td>20px</td>
              </tr>
              <tr>
                <td>Portrait tablets</td>
                <td>768px and above</td>
                <td>42px</td>
                <td>20px</td>
              </tr>
              <tr>
                <td>Phones to tablets</td>
                <td>767px and below</td>
                <td class="muted" colspan="2">Fluid columns, no fixed widths</td>
              </tr>
              <tr>
                <td>Phones</td>
                <td>480px and below</td>
                <td class="muted" colspan="2">Fluid columns, no fixed widths</td>
              </tr>
            </tbody>
          </table>