Bootstrap 4 - 如何保持侧边栏与响应方块相同的高度？

Question

我有以下设置：
我有一个图像框作为响应方使用伪元素:after和padding-bottom: 100%;

问题：
我希望在我的框旁边有一个侧边栏，它可以包含任意数量的小缩略图。但是，在默认的Bootstrap行为中，较小的框被调整为较大的框。相反，我试图让侧边栏始终与主要图像的高度相同。如果它更大，则内容应垂直滚动。

我尝试使用我的侧边栏周围的包装来实现这一点，但是盒子仍然会增长到它的大小。

我的问题：
如何确保侧边栏仅获得旁边方框的最大高度？

https://jsfiddle.net/Sirence/rzx6t8ey/

.row {
  margin-top: 20px;
}

.row>div {
  border: solid 1px #6c757d;
  padding: 10px;
}

img {
  display: block;
  border: 1px solid red;
}

.sidebar>div:not(:last-child) img {
  margin-bottom: 10px;
}

.main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.main .wrapper {
  border: 1px solid green;
  position: relative;
}

.main .wrapper:after {
  content: "\00a0";
  display: block;
  padding-bottom: 100%;
  line-height: 0;
}

.main .holder {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

.sidebar-wrapper .sidebar {
  height: 100%;
  overflow-y: scroll;
}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-1 sidebar">
      <div>
        <img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
      </div>
      <div>
        <img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
      </div>
    </div>
    <div class="col-2 main">
      <div class="wrapper">
        <div class="holder">
          <img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
        </div>
      </div>
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-1 sidebar">
      <div>
        <img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
      </div>
      <div>
        <img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
      </div>
      <div>
        <img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
      </div>
      <div>
        <img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
      </div>
      <div>
        <img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
      </div>
      <div>
        <img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
      </div>
      <div>
        <img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
      </div>
      <div>
        <img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
      </div>
    </div>
    <div class="col-2 main">
      <div class="wrapper">
        <div class="holder">
          <img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
        </div>
      </div>
    </div>
  </div>
</div>


<div class="container">
  <div class="row">
    <div class="col-1 sidebar-wrapper">
      <div class="sidebar">
        <div class="thumbnail">
          <img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
        </div>
        <div>
          <img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
        </div>
        <div>
          <img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
        </div>
        <div>
          <img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
        </div>
        <div>
          <img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
        </div>
        <div>
          <img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
        </div>
        <div>
          <img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
        </div>
        <div>
          <img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
        </div>
      </div>
    </div>
    <div class="col-2 main">
      <div class="wrapper">
        <div class="holder">
          <img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

只有纯CSS才能实现这一点。好吧，这个前提很简单。您希望您的行始终采用响应式图像的高度，并且不您提到的长缩略图列表。

我们需要告诉浏览器只查看图像的高度并忽略缩略图列表，为此，我们使用绝对位置从文档流中删除缩略图列表。

我复制了你的引导布局，虽然更简单，并实现了我刚才提到的。我将侧边栏定位设置为 relative ，垂直溢出为滚动。我用固定的柔性宽度设计它没有增长或缩小，然后放置另一个绝对定位容器div来容纳缩略图。

然后我添加了第二列，其中主图像将是。剩下的就是添加 img-fluid 引导程序样式以使图像响应并瞧！

在这里工作小提琴：Click Here

这是代码：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<style>
  .container-overrides {
    background: #ccc;
    margin: 20px auto;
    max-width: 500px !important;
  }

  .sidebar {
    position: relative;
    overflow-y: scroll;
    flex: 0 0 50px;
  }

  .sidebar .image-container {
    position: absolute;
    left: 0;
    right: 0;
    top: 10px;
    bottom: 10px;
  }

  .sidebar img {
    display: block;
    margin: 0 auto 10px;
  }

  .sidebar img:last-of-type {
    margin: 0 auto;
  }
  .main{
    background:#ccc;
  }
  .main img {
    height: auto;
    border: 1px solid red;
  }

</style>

<div class="container p-0 container-overrides">
  <div class="row no-gutters">
    <!-- Responsive Sidebar -->
    <div class="sidebar bg-dark p-2">
      <div class="image-container">
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
      </div>
    </div>
    <!-- Main Image Container -->
    <div class="col p-2 main">
      <img src="https://ih1.redbubble.net/image.393347411.1344/flat,800x800,070,f.jpg" class="img-fluid" />
    </div>
  </div>
</div>