Swiper JS 轮播不适合 Bootstrap 4 col

Question

我正在尝试将 Swiper JS 旋转木马放入 div 中，其中 col class 为 Bootstrap 4，但我的旋转木马没有'不要留在 col div 内。为了说明，这是我要实现的布局：

但是由于某些奇怪的原因，当我将轮播代码放在第二个 col div 时，我的页面最终变成了这样：

用 Inspect Element 工具弄乱了轮播属性，我发现造成这种情况的原因是 swiper-wrapper 具有的属性 display: flex，我仍然一直无法弄清楚如何使轮播在我的第二个 col div.

中很好地适应

我试过将 swiper-container 封装在另一个 div 中，设置 max-width: 100% 和 min-width: 100% 但似乎没有任何效果，就像 display: flex row class 的属性与 swiper-wrapper div.

的 display: flex 冲突

这是这部分布局的代码：

HTML

<div id="myaboutdiv" class="row">
    <div class="col topic">
        <p>TEXT</p>
    </div>
    <div class="col mt-5">
        <p class="text-left whoami"><i>This is some text</i></p>
        <p class="text-justify">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lorem purus, venenatis vel magna et, consectetur cursus libero. In augue est, iaculis sit amet faucibus ut, condimentum vitae ante. Donec et leo eu dolor suscipit viverra at et mauris. Quisque dapibus leo at ipsum elementum, sit amet interdum sapien ornare. Integer justo lorem, porttitor in gravida in, porttitor at tellus. Sed aliquet malesuada luctus. Duis ac nisl vitae nibh mattis luctus eget a ex. 
        </p>
        <br>
        <p class="text-left whoami"><i>Here's the Swiper Carousel</i></p>
        <div class="swiper-container" id="academichistory">
            <div class="swiper-wrapper">
                <div class="swiper-slide">Slide 1</div>
                <div class="swiper-slide">Slide 2</div>
                <div class="swiper-slide">Slide 3</div>
                <div class="swiper-slide">Slide 4</div>
                <div class="swiper-slide">Slide 5</div>
                <div class="swiper-slide">Slide 6</div>
                <div class="swiper-slide">Slide 7</div>
                <div class="swiper-slide">Slide 8</div>
                <div class="swiper-slide">Slide 9</div>
                <div class="swiper-slide">Slide 10</div>
            </div>
            <div class="swiper-pagination"></div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
    </div>
</div>

CSS

.topic {
  font-weight: bold;
  font-size: 2.5rem;
}

.whoami {
  color: grey;
  font-weight: 500;
}

最后，这里有一些截图：

swiper-wrapper 与 display: flex:

swiper-wrapper 没有 display: flex 属性:

我正在使用：

Swiper v5.3.6 和 Bootstrap4.

为了以防万一，下面是初始化 Swiper 轮播的 JS 代码：

JavaScript

var swiper = new Swiper('#academichistory', {
    loop: true,
    pagination: {
        el: '.swiper-pagination',
        type: 'progressbar',
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
});

Answer 1

可以用绝对定位解决
由于 .swiper-container 已经有 position: relative，您可以将 position: absolute 添加到 .swiper-wrapper。此外，使用 left: 0 和 top: 0.
定位它最后，绝对定位的swipper需要明确的高度，所以在.swiper-container.

中添加你想要的高度

.swiper-container {
  height: 270px;
}
.swiper-wrapper {
  position: absolute;
  left: 0;
  top: 0;
}

Swiper JS 轮播不适合 Bootstrap 4 col

Swiper JS carousel not fitting inside of Bootstrap 4 col

html

css

swiper

bootstrap-4