x1c 0d1x如果您认为标题似乎不足以准确地说明问题，我提前道歉。我使用的是tailwindcss for rails应用程序。我在包含多个散列的数组的帮助下将数据传递给view_component。我面临的问题是，它将所有对象放在一行中，使它们彼此重叠。我希望他们移动到新的行，如果需要，因此保持“空间-x-4”。
整个部分的html和模型如下：

<section class="flex bg-Ghost-White px-48">
  <div class="flex bg-Ghost-White px-48">
    <div class="basis-[40%] flex flex-col">
      <p class="text-Eerie-Black text-[30px] font-bold tracking-[-0.75px] leading-[34px]">Who have we helped?</p>
      <p class="text-Outer-Space text-[22px] font-normal tracking-[-0.55px] leading-[32px]">We take pride in providing help to people around the world.</p>
    </div>
    <div class="flex basis-[60%] space-x-4 bg-Ghost-White">
      <%= render Homepage::Projects::Project::Component.with_collection(@projects) %>
    </div>
  </div>
</section>

module Homepage
  module Projects
    class Component < ViewComponent::Base
      def initialize
        @projects = [{ title: "Water Well", image: "water-well.svg" },
                        { title: "Helping Children", image: "helping-children.svg" },
                        { title: "Eid", image: "eid.svg" },
                        { title: "Ramadan", image: "ramadan.svg" },
                        { title: "Orphans", image: "orphans.svg" },
                        { title: "Emergencies", image: "emergencies.svg" },
                        { title: "UK Projects", image: "uk-projects.svg" },
                        { title: "Mosque Builds", image: "mosque-builds.svg" },
                        { title: "Homeless", image: "homeless.svg" }]
      end
    end
  end
end

这些用于单个组件的参数如下所示：

<div class="flex items-center space-x-2 p-4 bg-White"> 
  <%= image_tag @project[:image], class: "w-[45px] h-[45px]", alt: "" %> 
  <p class="whitespace-nowrap"><%= @project[:title] %></p>
</div>

module Homepage
  module Projects
    module Project
      class Component < ViewComponent::Base
        with_collection_parameter :project

        def initialize(project:)
          @project = project
        end
      end
    end
  end
end