Question

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

<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>

Card看起来像这样：

<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's docs say的网格间距，但两张纸牌却彼此接触。我曾尝试在ml-2标记上添加<article>，但这只会导致元素过早包装，并留下太多空间。

我在这里做错什么，以及如何在两张牌之间增加缝隙？谢谢！

Answer 1

带有边距的“问题”是它存在于元素的框（模型）的外部，例如它会影响卡的总宽度。例如，在大屏幕上，您希望它们的宽度为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之类的相等水平填充以增加装订线。

您的问题是盒子阴影，然后它不允许您创建视觉间隙，因此从技术上讲，由于您的盒子阴影，您需要包装器！

如何在不包装到下一行的情况下实现水平间隔的Tailwind网格？

1 个答案: