0

我有一个包含以下内容的部分：

<section class="flex flex-wrap -mx-2">
    <Card
        v-for="(course, index) in courses"
        :key="index"
        :title="course.title"
        :professor="course.professor"
        :price="course.price"
        :excerpt="course.excerpt"
        :image="course.image"
        :category="course.category"
    />
</section>

ACard看起来像这样：

<article class="bg-red mt-5 px-2 w-full md:w-1/2 lg:w-1/3 xl:w-1/3 shadow-md rounded bg-white">
    <nuxt-link to="/courses/example-course">
        <img :src="`/images/${image}`" :alt="title" class="rounded-t w-full">
    </nuxt-link>
    <div class="p-4">
        <header class="flex justify-between">
            <section>
                <h3 class="text-gray-700">
                    <nuxt-link to="/courses/example-course" class="hover:text-gray-600" v-text="title"></nuxt-link>
                </h3>
                <p class="text-gray-600 mt-1" v-text="professor"></p>
            </section>
            <div v-if="price">
                <span class="px-2 py-1 bg-green-200 text-green-500 font-bold rounded">${{ price }}</span>
            </div>
        </header>
        <article class="text-gray-700 mt-2" v-text="excerpt"></article>
    </div>
    <footer class="border-t border-gray-300 uppercase p-5 flex justify-between">
        <span class="text-gray-600 text-xs font-bold self-center" v-text="category"></span>
        <a href="#" class="text-gray-600 hover:text-blue-600">
            <i v-if="price" class="fa fa-user"></i>
        </a>
    </footer>
</article>

这一切的结果是这样的：

演示

如您所见，尽管我遵循了Tailwind 文档关于网格间距的说明，但这些卡片仍然相互接触。我已经尝试添加标签ml-2，<article>但这只会导致过早地包装元素并留下太多空间。

我在这里做错了什么以及如何在卡片之间添加间隙？谢谢！

4

1 回答 1

2

边距的“问题”是它位于元素框（模型）的外部，例如它会影响卡片的总宽度。例如，在大屏幕上，您希望它们的宽度为 33.33%，但如果您在左侧/右侧添加边距，则卡片的宽度33.33% + margin将使 flexbox 容器在两个项目之后换行，否则总宽度将超过100%。您可以通过以下方式解决此问题：a）将事物设置为box-sizing: border-box（对边距没有帮助！）和 b）使用padding而不是边距来创建间隙，这通常需要在您的内容周围使用某种包装器，除了处理间距之外什么都不做和尺寸，像这样：

<article class="mt-5 px-2 w-full md:w-1/2 lg:w-1/3 xl:w-1/3">
    <div class="card bg-red shadow-md rounded bg-white">
        <nuxt-link to="/courses/example-course">
            <img :src="`/images/${image}`" :alt="title" class="rounded-t w-full">
        </nuxt-link>
        <div class="p-4">
            <header class="flex justify-between">
                <section>
                    <h3 class="text-gray-700">
                        <nuxt-link to="/courses/example-course" class="hover:text-gray-600" v-text="title"></nuxt-link>
                    </h3>
                    <p class="text-gray-600 mt-1" v-text="professor"></p>
                </section>
                <div v-if="price">
                    <span class="px-2 py-1 bg-green-200 text-green-500 font-bold rounded">${{ price }}</span>
                </div>
            </header>
            <article class="text-gray-700 mt-2" v-text="excerpt"></article>
        </div>
        <footer class="border-t border-gray-300 uppercase p-5 flex justify-between">
            <span class="text-gray-600 text-xs font-bold self-center" v-text="category"></span>
            <a href="#" class="text-gray-600 hover:text-blue-600">
                <i v-if="price" class="fa fa-user"></i>
            </a>
        </footer>
    </div>
</article>

我知道这样弄乱标记有点烦人，但它通常是值得的 =)。

编辑：实际上正如文档所说

向列容器添加负水平边距（如 -mx-2），并为每列添加相等的水平填充（如 px-2）以添加排水沟。

您的问题在于盒子阴影，它不会让您产生视觉差距，因此从技术上讲，由于您的盒子阴影，您需要包装器！

于 2019-07-13T15:31:18.610 回答