Question

我在bootstrap 4行中创建了一个垂直滑块，并对该行应用了高度限制。但垂直狙击手已经超出界限。

任何帮助将不胜感激。

感谢。

HTML：

<div class="row">
  <div class="col-6 mh-50">
    <div class="v-swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="//placehold.it/100x100?text=Week-1" /></div>
        <div class="swiper-slide"><img src="//placehold.it/100x100?text=Week-2" /></div>
        <div class="swiper-slide"><img src="//placehold.it/100x100?text=Week-3" /></div>
        <div class="swiper-slide"><img src="//placehold.it/100x100?text=Week-4" /></div>
        <div class="swiper-slide"><img src="//placehold.it/100x100?text=Week-5" /></div>
        <div class="swiper-slide"><img src="//placehold.it/100x100?text=Week-6" /></div>
        <div class="swiper-slide"><img src="//placehold.it/100x100?text=Week-7" /></div>
        <div class="swiper-slide"><img src="//placehold.it/100x100?text=Week-8" /></div>
        <div class="swiper-slide"><img src="//placehold.it/100x100?text=Week-9" /></div>
        <div class="swiper-slide"><img src="//placehold.it/100x100?text=Week-10" /></div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
  </div>

  <div class="col-6 mh-50">
    <img src="//placehold.it/200x100?text=Col-2" />
  </div>
</div>
<div class="row">
  <img src="//placehold.it/500x100?text=Row-2" />

</div>

CSS：

.mh-50 {
  max-height: 50vh;
}

JS：

var vswiper = new Swiper('.v-swiper-container', {
  direction: 'vertical',
  speed: 2000,
  autoplay: {
    delay: 2000,
  },
  loop: true,
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
});

JS小提琴：https://jsfiddle.net/4ogo3vcg/4/

Answer 1

问题的原因是html标记的子级不会被其父级的边界自动剪切。以下示例模拟了这种现象。

.box {
    box-sizing: border-box;
    width: 100px;
    height: 100px;
}

.clip {
    overflow: hidden;
}

<div style="float: left; margin: 20px;">
    <div class="box" style="background-color: red; padding: 20px;">
        <div class="box" style="background-color: green;"></div>
    </div>
</div>

<div style="float: left; margin: 20px;">
    <div class="box clip" style="background-color: red; padding: 20px;">
        <div class="box" style="background-color: green;"></div>
    </div>
</div>

正如您还可以从示例中看到的那样，解决方案是使用overflow css property，它指定当内容太大而无法容纳在块级容器中时要执行的操作。

在您的情况下，最快的解决方法是将overflow: hidden;放入.mh-50类，但这也会影响项目的其他部分，所以我宁愿把它放到一个单独的类中

此外，还有一些关于标记其他方面的说明：

根据网格布局中的Bootstrap Docs“，内容必须放在列（.col）中，并且只有列可能是行的直接子项（.row）。”
同样，内容应放入.container或.container-fluid标记。（这将从您的示例中删除水平滚动条。）

话虽如此，您的代码看起来像这样：

var vswiper = new Swiper('.v-swiper-container', {
    direction: 'vertical',
    speed: 2000,
    autoplay: {
        delay: 2000,
    },
    loop: true,
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    },
});

.mh-50 {
    max-height: 50vh;
}

.clip {
    overflow: hidden;
}

<div class="container-fluid">
    <div class="row">
        <div class="col-6 mh-50 clip">
            <div class="v-swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="//placehold.it/100x100?text=Week-1" /></div>
                    <div class="swiper-slide"><img src="//placehold.it/100x100?text=Week-2" /></div>
                    <div class="swiper-slide"><img src="//placehold.it/100x100?text=Week-3" /></div>
                    <div class="swiper-slide"><img src="//placehold.it/100x100?text=Week-4" /></div>
                    <div class="swiper-slide"><img src="//placehold.it/100x100?text=Week-5" /></div>
                    <div class="swiper-slide"><img src="//placehold.it/100x100?text=Week-6" /></div>
                    <div class="swiper-slide"><img src="//placehold.it/100x100?text=Week-7" /></div>
                    <div class="swiper-slide"><img src="//placehold.it/100x100?text=Week-8" /></div>
                    <div class="swiper-slide"><img src="//placehold.it/100x100?text=Week-9" /></div>
                    <div class="swiper-slide"><img src="//placehold.it/100x100?text=Week-10" /></div>
                </div>

                <div class="swiper-pagination"></div>
            </div>
        </div>

        <div class="col-6 mh-50">
            <img class="img-fluid" src="//placehold.it/800x100?text=Col-2" />
        </div>
    </div>

    <div class="row">
        <div class="col">
            <img class="img-fluid" src="//placehold.it/1600x100?text=Row-2" />
        </div>
    </div>
</div>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.6/css/swiper.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.6/js/swiper.js"></script>

Answer 2

我在使用 Swiper 6.7.0 版时遇到了同样的问题。我在这里分享我的解决方法。

我对 CSS 做了一些调整。

.swiper-container-vertical .swiper-wrapper {
      position: absolute;
}

我希望这可以结束某人的搜索。快乐编码！ :)

垂直滑动器的高度不合理

2 个答案: