Bulma CSS 响应性不适用于 Bulma Carousel of Images

Question

我创建了一个网站，使用 Bulma CSS 框架进行样式设置。我还使用 Bulma Carousel 作为文本轮播。我使用 Bulma 中的列功能在图像/视频的左侧有一个轮播。这在我的屏幕上运行良好，直到我将图像包装在一个带有“图像 is-16by9”类的标签中。现在，图像位于轮播下方。此外，当浏览器变得足够小或我在移动设备上时，图像会变得很大。

我们的目标是让图像位于轮播下方，并在较小的设备上正确缩放，而在台式机上，图像更大并靠近轮播，与轮播一起。

.slick-prev::before,
.slick-next::before {
  color: black !important;
}

.carousel {
  overflow: hidden;
}

<section data-aos="fade-up" id="rendering" class="hero is-fullheight child">
      <div class="hero-body">
        <div class="container">
          <div class="content is-large">
            <h3>Title Here</h3>
            <div id="columns is-vcentered">
              <div class="column is-7">
                <div class="3dCarousel">
                  <div class="item-1">
                    Item 1
                  </div>
                  <div class="item-2">
                    Item 2
                  </div>
                  <div class="item-3">
                    Item 3
                  </div>
                </div>
              </div>
              <div class="column">
                <figure class="image is-16by9">
                  <img
                    src="./images/render.png"
                    alt="Render"
                  />
                </figure>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

代码在桌面上的结果还不错，预计图像不会缩放并且不在轮播旁边。一段时间以来，我一直在尝试不同的修复方法，但它们要么搞砸了其他东西，要么根本不起作用。

Answer 1

尝试将is-mobile 和is-multiline 添加到您的列类中