问创建图像等高列和可滚动列表组列的行
EN

Stack Overflow用户

提问于 2017-08-25 23:39:19

回答 1查看 80关注 0票数 0

有谁知道如何创建两个响应式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;
}

jquery

html

css

twitter-bootstrap

bootstrap-4

回答 1

Stack Overflow用户

发布于 2017-08-26 00:40:50

因此，在这种情况下，您需要做的是使用JS找到图像的高度，并将列表的高度设置为与图像的高度相等。此外，由于Bootstrap4在rows上使用flex display，因此您需要将cols设置为align-items: start;，方法是为row设置一个我正在使用Bootstrap v4-beta的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);
});

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>