Question

有谁知道如何创建两个具有相同高度的响应式Bootstrap 4列，其中一列是图像而另一列是可滚动列表？

这是一个小提琴（请注意，我不希望列表组在视口大小调整时超出图像的高度）：https://jsfiddle.net/lgants/gyk31vow/

我真的花了几天时间，所以任何帮助都会非常感激！

HTML：

<div class="row row-eq-height">
  <div class="col">
    <img src="http://lorempixel.com/output/sports-q-c-800-600-2.jpg">
  </div>
  <div class="col">
    <div class="card">
      <ul class="list-group">
        <li class="list-group-item">Cras justo odio</li>
        <li class="list-group-item">Dapibus ac facilisis in</li>
        <li class="list-group-item">Morbi leo risus</li>
        <li class="list-group-item">Porta ac consectetur ac</li>
        <li class="list-group-item">Porta ac consectetur ac</li>
        <li class="list-group-item">Porta ac consectetur ac</li>
        <li class="list-group-item">Porta ac consectetur ac</li>
        <li class="list-group-item">Porta ac consectetur ac</li>
      </ul>
    </div>
  </div>
</div>

CSS：

img {
  max-width:100%;
  max-height:100%;
  object-fit: contain;
}

.list-group {
  overflow-y: scroll;
}

Answer 1

因此，在这种情况下你需要做的是使用JS来查找图像的高度，并将列表的高度设置为等于图像的高度。此外，由于Bootstrap 4在row上使用弹性显示，您需要将col设置为align-items: start;，方法是row align-items-start我是var picHeight = $('.pic-height').height(); $('.list-group').css('height', picHeight); $(window).resize(function() { var picHeight = $('.pic-height').height(); $('.list-group').css('height', picHeight); });使用Bootstrap v4-beta

img {
  max-width:100%;
  max-height:100%;
  object-fit: contain;
}

.list-group {
  overflow-y: scroll;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>


<div class="row row-eq-height align-items-start">
  <div class="col pic-height">
    <img src="http://lorempixel.com/output/sports-q-c-800-600-2.jpg">
  </div>
  <div class="col">
    <div class="card">
      <ul class="list-group">
        <li class="list-group-item">Cras justo odio</li>
        <li class="list-group-item">Dapibus ac facilisis in</li>
        <li class="list-group-item">Morbi leo risus</li>
        <li class="list-group-item">Porta ac consectetur ac</li>
        <li class="list-group-item">Porta ac consectetur ac</li>
        <li class="list-group-item">Porta ac consectetur ac</li>
        <li class="list-group-item">Porta ac consectetur ac</li>
        <li class="list-group-item">Porta ac consectetur ac</li>
        <li class="list-group-item">Porta ac consectetur ac</li>
        <li class="list-group-item">Porta ac consectetur ac</li>
        <li class="list-group-item">Porta ac consectetur ac</li>
        <li class="list-group-item">Porta ac consectetur ac</li>
      </ul>
    </div>
  </div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

{{1}}

使用等于高度的图像列和可滚动列表组列创建行

1 个答案: