响应式移动视图中的引导轮播高度差答案

【问题标题】：bootstrap carousel height difference in responsive mobile view响应式移动视图中的引导轮播高度差
【发布时间】：2019-09-16 14:24:49
【问题描述】：

我的网站中有许多轮播滑块它在 PC 上运行良好，但是当我在移动设备上打开网站时，它变得有点难看。

问题来了：

假设在轮播的每张幻灯片中，我最多有 4 张图片，它们位于 col-md-3.col-12 div 中

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
    <div class="row">
      <div class="col-md-3 col-12">
            <img class="img-fluid" src="https://via.placeholder.com/20x20" alt="First slide" style="height:20px">
      </div>
      <div class="col-md-3 col-12">
            <img class="img-fluid" src="https://via.placeholder.com/20x20" alt="First slide" style="height:20px">
      </div>
      <div class="col-md-3 col-12">
            <img class="img-fluid" src="https://via.placeholder.com/20x20" alt="First slide" style="height:20px">
      </div>
      <div class="col-md-3 col-12">
            <img class="img-fluid" src="https://via.placeholder.com/20x20" alt="First slide" style="height:20px">
      </div>
    </div>


    </div>

    <div class="carousel-item">
      <div class="col-md-3 col-12">
            <img class="img-fluid" src="https://via.placeholder.com/20x20" alt="First slide" style="height:20px">
      </div>
      </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

在第一张幻灯片/项目中，我有 4 个 div ，每个 div 都有 20px 高度，在移动视图中，div.col-12.col-md-4 垂直定位并且它们在彼此下方，所以这张幻灯片的高度总共是 80px。

在下一张幻灯片/项目中，我有 1 div.col-12.col-md-4，这意味着这张幻灯片的高度为 20 像素。

这是第一张幻灯片

这是下一张幻灯片

因此，当幻灯片更改时，由于这些高度差异，页面会上下跳跃。

解决这个问题的方法是什么？

我想我可以在轮播中添加 min-height:80px 以补偿不同幻灯片中的高度损失（当然仅在移动视图中）......但它不会很干净

或者我可以在移动视图中禁用轮播，这样所有项目都会在不滑动的情况下显示（不确定是否可能或如何）

这里是 jsfiddle

https://jsfiddle.net/3uq4ozd2/1/

【问题讨论】：

Bootstrap 4 轮播不应将幻灯片一张放在另一张之下。这是一个工作小提琴：jsfiddle.net/wlarch/Lumyhg18/1。您还可以在轮播上设置最大高度，以确保它们不会移动视口/页面。
@wlarcheveque 抱歉，我认为我没有正确解释问题，在移动视图中更改为 100% 的图像，因此每个图像将覆盖整个页面宽度......我使用 col div 来显示这个问题这里是 jsfiddle jsfiddle.net/3uq4ozd2/1
如果这是移动的，那么，你为什么不做视图，100% 的视口（最小高度：100vh;），让图像之间有更多的空间？

标签： jquery html css twitter-bootstrap bootstrap-4

【解决方案1】：

我建议您将 Bootstrap Carousel 幻灯片高度标准化，以便将高度设置为最高幻灯片：

function normalizeSlideHeights() {
    $('.carousel').each(function(){
      var items = $('.carousel-item', this);

      // reset the height
      items.css('min-height', 0);

      // set the height
      var maxHeight = Math.max.apply(null, 
          items.map(function(){
              return $(this).outerHeight()}).get() );

      items.css('min-height', maxHeight + 'px');
    })
}

$(window).on('resize orientationchange', normalizeSlideHeights);

参考： https://snook.ca/archives/javascript/normalize-bootstrap-carousel-heights

【讨论】：