html - Swiper JS轮播不适合Bootstrap 4 col

问题描述

我正在尝试将Swiper JS轮播放在col具有 Bootstrap 4 类的 div 内，但我的轮播不会留在coldiv 内。为了说明，这是我试图实现的布局：

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

使用该Inspect Element工具弄乱轮播属性，我发现导致这是该属性display: flex的原因swiper-wrapper，我仍然无法弄清楚如何使轮播很好地适合我的第二个coldiv。

我已经尝试将其封装swiper-container在另一个 div 中，设置max-width: 100%但min-width: 100%似乎没有任何效果，就像类的display: flex属性与div 的属性row冲突一样。display: flexswiper-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与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',
    },
});

标签： htmlcssbootstrap-4swiper

您可以使用绝对定位来解决它。
既然.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;
}

html - Swiper JS轮播不适合Bootstrap 4 col

问题描述

解决方案

推荐阅读