tailwind-css - 如何显示项目直到 1 行中的 3 个元素，并且下一个第 4 个元素必须在 tailwindcss 的下一行？

Question

使用 tailwindcss 2 / Alpinejs 2.8 我尝试显示项目，直到 1 行中的 3 个元素，并且下一个第 4 个元素必须在下一行，就像我做 wuth php/bootstrap 一样：

        <div class="row m-2">
            @foreach($hostelFacilities as $nextFacility)
                <div class="facility_item col-12 col-sm-4">
                    {!! $viewFuncs->showAppIcon('check') !!}&nbsp;{{ $nextFacility->name }}
                </div>
            @endforeach
        </div>

我试着做这样的：

        <div class="flex w-full"          >
            <template x-for="nextCategory in categories" :key="nextCategory.id">
                <div class="border px-2 cursor-pointer w-4/12 flex flex-nowrap"          >
                    <input type="checkbox"
                           x-model="searchSelectedCategoryIds"
                           :value="nextCategory.id"
                           class="editor_checkbox_field"
                    >
                    <label :for="'cbx_' + nextCategory.id"
                           class="whitespace-nowrap md:flex-shrink-0"
                           x-text="nextCategory.name">
                    </label>
                </div>
            </template>

但失败了，因为所有项目都在 1 行中......

正确到什么程度？

谢谢！

标签： tailwind-css

Answer 1

在这种情况下，我强烈建议使用网格系统。

这是3 in one row的示例。

<div class="grid grid-cols-3 gap-1">
  <div class="col-span-1 h-20 bg-gray-100">1</div>
  <div class="col-span-1 h-20 bg-gray-100">2</div>
  <div class="col-span-1 h-20 bg-gray-100">3</div>
  <div class="col-span-1 h-20 bg-gray-100">4</div>
  <div class="col-span-1 h-20 bg-gray-100">5</div>
  <div class="col-span-1 h-20 bg-gray-100">6</div>
  <div class="col-span-1 h-20 bg-gray-100">7</div>
  <div class="col-span-1 h-20 bg-gray-100">8</div>
</div>