Flickity 轮播渲染太大并在 Nuxt/Tailwind 应用程序中创建水平滚动答案

【问题标题】：Flickity carousel rendering too large and creating horizontal scrolling in Nuxt/Tailwind applicationFlickity 轮播渲染太大并在 Nuxt/Tailwind 应用程序中创建水平滚动
【发布时间】：2021-12-13 05:08:29
【问题描述】：

我在使用 Tailwind 样式的 Nuxt/Vue 应用程序中使用来自 Flickity 的轮播。此轮播位于 12 列网格中，从第二列开始跨越 11 列（结束于屏幕的右边框）。当我调整屏幕大小时，有时会出现一点水平滚动。我不想有这种水平滚动。有没有办法做到这一点？

<template>
  <div class="grid grid-cols-12">
    <CarouselBase class="pl-95 col-start-2 col-span-11" >
        <ResourceCard
            v-for="(item, itemIndex) in items"
            :key="itemIndex"
            v-bind="item"
            class="mr-2"
        />
    </CarouselBase>
  </div>
</template>

【问题讨论】：

嗨，我的回答有帮助吗？如果有，请点赞。

标签： vuejs2 nuxt.js tailwind-css vue-flickity

【解决方案1】：

删除填充 (pl-95) 修复了水平滚动问题。

【讨论】：