Swiper JS传送带不适合Bootstrap 4列的内部

Question

我正在尝试使用Bootstrap 4的Swiper JS类将col轮播放入div内，但我的轮播不会留在col div内。为了说明这一点，这是我要实现的布局：

但是由于某种奇怪的原因，当我将轮播代码放入第二个col div中时，我的页面最终像这样结束：

使用Inspect Element工具处理轮播属性，我发现导致此问题的原因是display: flex具有的属性swiper-wrapper，但我仍然无法弄清楚如何制作轮播非常适合我的第二个col分区。>

我曾尝试将swiper-container封装在另一个div中，设置max-width: 100%和min-width: 100%，但似乎无济于事，就像display: flex类的row属性与该display: flex的swiper-wrapper分区

这是布局这部分的代码：

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 with display: flex：

[swiper-wrapper没有display: flex属性：

我正在使用：

Swiper v5.3.6和Bootstrap 4。

以防万一，这是初始化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',
    },
});

我正在尝试将Bootertrap 4的col类的Swiper JS轮播放入div内，但我的轮播不会留在col div内。为了说明这一点，这是我要实现的布局：但是...

Answer 1

您可以使用绝对定位来解决。由于.swiper-container已经具有position: relative，因此可以将position: absolute添加到.swiper-wrapper。另外，使用left: 0和top: 0对其进行定位。最后，绝对定位的滑动器需要一个明确的高度，因此请在.swiper-container中添加所需的高度。

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