CSS网格项目与Django模板中的一行未对齐，并与tailwind-css对齐

发布于 2025-02-10 20:20:52 字数 3915 浏览 2 评论 0原文

我是Django的新手，并遇到了这个问题。因此，基本上，我正在制作一个应用程序，必须在主页上显示房间。这些房间是动态生成的，并存储在数据库中，该数据库被以这样的主页获取（在views.py中），

def home(request):
    return render(request, 'base/index.html', {'rooms':rooms})

然后index.html将使用jinja for Loop以卡的形式显示数据，类似的东西， 只是忽略了课堂，它们只是虚拟图像，在这里我使用 tailwind-css 用于样式，

{% for room in rooms %}
<div class="grid grid-cols-1 md:grid-cols-3 border-4 border-red-400 lg:grid-cols-4 sm:grid-cols-2 gap-10">
    <div class="rounded overflow-hidden border-4 border-red-400 shadow-lg">
        <a href="/room/{{room.id}}">
            <div class="relative">
                <img class="w-full"
                    src="https://images.pexels.com/photos/196667/pexels-photo-196667.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
                    alt="Sunset in the mountains">
                <div
                    class="hover:bg-transparent transition duration-300 absolute bottom-0 top-0 right-0 left-0 bg-gray-900 opacity-25">
                </div>
                <a href="#!">
                    <div
                        class="absolute bottom-0 left-0 bg-indigo-600 px-4 py-2 text-white text-sm hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
                        {{room.id}}
                    </div>
                </a>
                <a href="!#">
                    <div
                        class="text-sm absolute top-0 right-0 bg-indigo-600 px-4 text-white rounded-full h-16 w-16 flex flex-col items-center justify-center mt-3 mr-3 hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
                        <span class="font-bold">27</span>
                        <small>March</small>
                    </div>
                </a>
            </div>
        </a>
        <div class="px-6 py-4">
            <a href="#"
                class="font-semibold text-lg inline-block hover:text-indigo-600 transition duration-500 ease-in-out">{{room.name}}</a>
            <p class="text-gray-500 text-sm">
                {{room.desc}}
            </p>
        </div>
        <div class="px-6 py-4 flex flex-row items-center">
            <span href="#" class="py-1 text-sm font-regular text-gray-900 mr-1 flex flex-row items-center">
                <svg height="13px" width="13px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
                    style="enable-background:new 0 0 512 512;" xml:space="preserve">
                    <g>
                        <g>
                            <path d="M256,0C114.837,0,0,114.837,0,256s114.837,256,256,256s256-114.837,256-256S397.163,0,256,0z M277.333,256
      c0,11.797-9.536,21.333-21.333,21.333h-85.333c-11.797,0-21.333-9.536-21.333-21.333s9.536-21.333,21.333-21.333h64v-128
      c0-11.797,9.536-21.333,21.333-21.333s21.333,9.536,21.333,21.333V256z" />
                        </g>
                    </g>
                </svg>
                <span class="ml-1">6 mins ago</span></span>
        </div>
    </div>
</div>

{% endfor %}

我正在使用 tailwindcss 用于造型，并且显示网格似乎不适用于此功能，我添加了 grid-cols-4 ，这意味着4列1 fr，以便将4个Divs放在1行中，但是只有1个被放置，休息只是走上了不同的线。（红色边界用于故障排除）

在我理解的是，应用的CSS无法检测到动态生成的数据集，只考虑1张卡。

如何修复此问题并使3-4个动态生成的网格项目一排？

原文

I am new to Django and ran into this issue.
so basically I am making an app where I have to display rooms on the main home page.
The rooms are generated dynamically and are stored in the database that are fetched for the home page like this (in the views.py)

def home(request):
    return render(request, 'base/index.html', {'rooms':rooms})

then the index.html will display the data in the form of cards using jinja for loop, something like this, just ignore the classes and all that, they are just dummy images, here I am using tailwind-css for styling

{% for room in rooms %}
<div class="grid grid-cols-1 md:grid-cols-3 border-4 border-red-400 lg:grid-cols-4 sm:grid-cols-2 gap-10">
    <div class="rounded overflow-hidden border-4 border-red-400 shadow-lg">
        <a href="/room/{{room.id}}">
            <div class="relative">
                <img class="w-full"
                    src="https://images.pexels.com/photos/196667/pexels-photo-196667.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
                    alt="Sunset in the mountains">
                <div
                    class="hover:bg-transparent transition duration-300 absolute bottom-0 top-0 right-0 left-0 bg-gray-900 opacity-25">
                </div>
                <a href="#!">
                    <div
                        class="absolute bottom-0 left-0 bg-indigo-600 px-4 py-2 text-white text-sm hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
                        {{room.id}}
                    </div>
                </a>
                <a href="!#">
                    <div
                        class="text-sm absolute top-0 right-0 bg-indigo-600 px-4 text-white rounded-full h-16 w-16 flex flex-col items-center justify-center mt-3 mr-3 hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
                        <span class="font-bold">27</span>
                        <small>March</small>
                    </div>
                </a>
            </div>
        </a>
        <div class="px-6 py-4">
            <a href="#"
                class="font-semibold text-lg inline-block hover:text-indigo-600 transition duration-500 ease-in-out">{{room.name}}</a>
            <p class="text-gray-500 text-sm">
                {{room.desc}}
            </p>
        </div>
        <div class="px-6 py-4 flex flex-row items-center">
            <span href="#" class="py-1 text-sm font-regular text-gray-900 mr-1 flex flex-row items-center">
                <svg height="13px" width="13px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
                    style="enable-background:new 0 0 512 512;" xml:space="preserve">
                    <g>
                        <g>
                            <path d="M256,0C114.837,0,0,114.837,0,256s114.837,256,256,256s256-114.837,256-256S397.163,0,256,0z M277.333,256
      c0,11.797-9.536,21.333-21.333,21.333h-85.333c-11.797,0-21.333-9.536-21.333-21.333s9.536-21.333,21.333-21.333h64v-128
      c0-11.797,9.536-21.333,21.333-21.333s21.333,9.536,21.333,21.333V256z" />
                        </g>
                    </g>
                </svg>
                <span class="ml-1">6 mins ago</span></span>
        </div>
    </div>
</div>

{% endfor %}

I am using tailwindcss for styling, and the display grid doesn't seem to work with this, I have added grid-cols-4 for large screens, which means 4 columns of 1 fr so that 4 divs can be placed in 1 line, but only 1 is being placed and rest just goes to different line. (red borders are for troubleshooting)

In my understanding, the css applied is not able to detect the dynamically generated set of data, and consider only 1 card.

How to fix this and make 3-4 dynamically generated grid items to be in one row?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

铃予 2025-02-17 20:20:52

我认为您在打电话时犯了一个错误。我不知道Django是如何工作的，但是您应该在第一个div之后调用循环。因此，某些伪代码可以在下面像这样

<div class="grid grid-cols-1 md:grid-cols-3 border-4  lg:grid-cols-4 sm:grid-cols-2 gap-10">
  <!-- call loop here or use something like "map function" equivalent in django-->
 

  <div class="rounded overflow-hidden border-4 border-red-400 shadow-lg">
    .
    .
    .
  </div>

 <!-- call ends here -->
</div>

我添加了tailwindcss代码，因为我不能在这里应用循环，所以我只是重复复制4张卡代码

<script src="https://cdn.tailwindcss.com"></script>
<div class="grid grid-cols-1 md:grid-cols-3 border-4  lg:grid-cols-4 sm:grid-cols-2 gap-10">
  <!-- call loop here or use something like "map function" equivalent in django-->
    <div class="rounded overflow-hidden border-4 border-red-400 shadow-lg">
        <a href="/room/{{room.id}}">
            <div class="relative">
                <img class="w-full"
                    src="https://images.pexels.com/photos/196667/pexels-photo-196667.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
                    alt="Sunset in the mountains">
                <div
                    class="hover:bg-transparent transition duration-300 absolute bottom-0 top-0 right-0 left-0 bg-gray-900 opacity-25">
                </div>
                <a href="#!">
                    <div
                        class="absolute bottom-0 left-0 bg-indigo-600 px-4 py-2 text-white text-sm hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
                        {{room.id}}
                    </div>
                </a>
                <a href="!#">
                    <div
                        class="text-sm absolute top-0 right-0 bg-indigo-600 px-4 text-white rounded-full h-16 w-16 flex flex-col items-center justify-center mt-3 mr-3 hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
                        <span class="font-bold">27</span>
                        <small>March</small>
                    </div>
                </a>
            </div>
        </a>
        <div class="px-6 py-4">
            <a href="#"
                class="font-semibold text-lg inline-block hover:text-indigo-600 transition duration-500 ease-in-out">{{room.name}}</a>
            <p class="text-gray-500 text-sm">
                {{room.desc}}
            </p>
        </div>
        <div class="px-6 py-4 flex flex-row items-center">
            <span href="#" class="py-1 text-sm font-regular text-gray-900 mr-1 flex flex-row items-center">
                <svg height="13px" width="13px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
                    style="enable-background:new 0 0 512 512;" xml:space="preserve">
                    <g>
                        <g>
                            <path d="M256,0C114.837,0,0,114.837,0,256s114.837,256,256,256s256-114.837,256-256S397.163,0,256,0z M277.333,256
      c0,11.797-9.536,21.333-21.333,21.333h-85.333c-11.797,0-21.333-9.536-21.333-21.333s9.536-21.333,21.333-21.333h64v-128
      c0-11.797,9.536-21.333,21.333-21.333s21.333,9.536,21.333,21.333V256z" />
                        </g>
                    </g>
                </svg>
                <span class="ml-1">6 mins ago</span></span>
        </div>
    </div>

    <div class="rounded overflow-hidden border-4 border-red-400 shadow-lg">
        <a href="/room/{{room.id}}">
            <div class="relative">
                <img class="w-full"
                    src="https://images.pexels.com/photos/196667/pexels-photo-196667.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
                    alt="Sunset in the mountains">
                <div
                    class="hover:bg-transparent transition duration-300 absolute bottom-0 top-0 right-0 left-0 bg-gray-900 opacity-25">
                </div>
                <a href="#!">
                    <div
                        class="absolute bottom-0 left-0 bg-indigo-600 px-4 py-2 text-white text-sm hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
                        {{room.id}}
                    </div>
                </a>
                <a href="!#">
                    <div
                        class="text-sm absolute top-0 right-0 bg-indigo-600 px-4 text-white rounded-full h-16 w-16 flex flex-col items-center justify-center mt-3 mr-3 hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
                        <span class="font-bold">27</span>
                        <small>March</small>
                    </div>
                </a>
            </div>
        </a>
        <div class="px-6 py-4">
            <a href="#"
                class="font-semibold text-lg inline-block hover:text-indigo-600 transition duration-500 ease-in-out">{{room.name}}</a>
            <p class="text-gray-500 text-sm">
                {{room.desc}}
            </p>
        </div>
        <div class="px-6 py-4 flex flex-row items-center">
            <span href="#" class="py-1 text-sm font-regular text-gray-900 mr-1 flex flex-row items-center">
                <svg height="13px" width="13px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
                    style="enable-background:new 0 0 512 512;" xml:space="preserve">
                    <g>
                        <g>
                            <path d="M256,0C114.837,0,0,114.837,0,256s114.837,256,256,256s256-114.837,256-256S397.163,0,256,0z M277.333,256
      c0,11.797-9.536,21.333-21.333,21.333h-85.333c-11.797,0-21.333-9.536-21.333-21.333s9.536-21.333,21.333-21.333h64v-128
      c0-11.797,9.536-21.333,21.333-21.333s21.333,9.536,21.333,21.333V256z" />
                        </g>
                    </g>
                </svg>
                <span class="ml-1">6 mins ago</span></span>
        </div>
    </div>

    <div class="rounded overflow-hidden border-4 border-red-400 shadow-lg">
        <a href="/room/{{room.id}}">
            <div class="relative">
                <img class="w-full"
                    src="https://images.pexels.com/photos/196667/pexels-photo-196667.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
                    alt="Sunset in the mountains">
                <div
                    class="hover:bg-transparent transition duration-300 absolute bottom-0 top-0 right-0 left-0 bg-gray-900 opacity-25">
                </div>
                <a href="#!">
                    <div
                        class="absolute bottom-0 left-0 bg-indigo-600 px-4 py-2 text-white text-sm hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
                        {{room.id}}
                    </div>
                </a>
                <a href="!#">
                    <div
                        class="text-sm absolute top-0 right-0 bg-indigo-600 px-4 text-white rounded-full h-16 w-16 flex flex-col items-center justify-center mt-3 mr-3 hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
                        <span class="font-bold">27</span>
                        <small>March</small>
                    </div>
                </a>
            </div>
        </a>
        <div class="px-6 py-4">
            <a href="#"
                class="font-semibold text-lg inline-block hover:text-indigo-600 transition duration-500 ease-in-out">{{room.name}}</a>
            <p class="text-gray-500 text-sm">
                {{room.desc}}
            </p>
        </div>
        <div class="px-6 py-4 flex flex-row items-center">
            <span href="#" class="py-1 text-sm font-regular text-gray-900 mr-1 flex flex-row items-center">
                <svg height="13px" width="13px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
                    style="enable-background:new 0 0 512 512;" xml:space="preserve">
                    <g>
                        <g>
                            <path d="M256,0C114.837,0,0,114.837,0,256s114.837,256,256,256s256-114.837,256-256S397.163,0,256,0z M277.333,256
      c0,11.797-9.536,21.333-21.333,21.333h-85.333c-11.797,0-21.333-9.536-21.333-21.333s9.536-21.333,21.333-21.333h64v-128
      c0-11.797,9.536-21.333,21.333-21.333s21.333,9.536,21.333,21.333V256z" />
                        </g>
                    </g>
                </svg>
                <span class="ml-1">6 mins ago</span></span>
        </div>
    </div>

    <div class="rounded overflow-hidden border-4 border-red-400 shadow-lg">
        <a href="/room/{{room.id}}">
            <div class="relative">
                <img class="w-full"
                    src="https://images.pexels.com/photos/196667/pexels-photo-196667.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
                    alt="Sunset in the mountains">
                <div
                    class="hover:bg-transparent transition duration-300 absolute bottom-0 top-0 right-0 left-0 bg-gray-900 opacity-25">
                </div>
                <a href="#!">
                    <div
                        class="absolute bottom-0 left-0 bg-indigo-600 px-4 py-2 text-white text-sm hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
                        {{room.id}}
                    </div>
                </a>
                <a href="!#">
                    <div
                        class="text-sm absolute top-0 right-0 bg-indigo-600 px-4 text-white rounded-full h-16 w-16 flex flex-col items-center justify-center mt-3 mr-3 hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
                        <span class="font-bold">27</span>
                        <small>March</small>
                    </div>
                </a>
            </div>
        </a>
        <div class="px-6 py-4">
            <a href="#"
                class="font-semibold text-lg inline-block hover:text-indigo-600 transition duration-500 ease-in-out">{{room.name}}</a>
            <p class="text-gray-500 text-sm">
                {{room.desc}}
            </p>
        </div>
        <div class="px-6 py-4 flex flex-row items-center">
            <span href="#" class="py-1 text-sm font-regular text-gray-900 mr-1 flex flex-row items-center">
                <svg height="13px" width="13px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
                    style="enable-background:new 0 0 512 512;" xml:space="preserve">
                    <g>
                        <g>
                            <path d="M256,0C114.837,0,0,114.837,0,256s114.837,256,256,256s256-114.837,256-256S397.163,0,256,0z M277.333,256
      c0,11.797-9.536,21.333-21.333,21.333h-85.333c-11.797,0-21.333-9.536-21.333-21.333s9.536-21.333,21.333-21.333h64v-128
      c0-11.797,9.536-21.333,21.333-21.333s21.333,9.536,21.333,21.333V256z" />
                        </g>
                    </g>
                </svg>
                <span class="ml-1">6 mins ago</span></span>
        </div>
    </div>
</div>

I think you made a mistake while calling a loop. I don't know how Django works but you should call the loop after the first div. So some pseudo-code can be like this

<div class="grid grid-cols-1 md:grid-cols-3 border-4  lg:grid-cols-4 sm:grid-cols-2 gap-10">
  <!-- call loop here or use something like "map function" equivalent in django-->
 

  <div class="rounded overflow-hidden border-4 border-red-400 shadow-lg">
    .
    .
    .
  </div>

 <!-- call ends here -->
</div>

Below I am adding the tailwindcss code , since I can’t apply loop here so I just copy-paste the 4 cards code repetitively

<script src="https://cdn.tailwindcss.com"></script>
<div class="grid grid-cols-1 md:grid-cols-3 border-4  lg:grid-cols-4 sm:grid-cols-2 gap-10">
  <!-- call loop here or use something like "map function" equivalent in django-->
    <div class="rounded overflow-hidden border-4 border-red-400 shadow-lg">
        <a href="/room/{{room.id}}">
            <div class="relative">
                <img class="w-full"
                    src="https://images.pexels.com/photos/196667/pexels-photo-196667.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
                    alt="Sunset in the mountains">
                <div
                    class="hover:bg-transparent transition duration-300 absolute bottom-0 top-0 right-0 left-0 bg-gray-900 opacity-25">
                </div>
                <a href="#!">
                    <div
                        class="absolute bottom-0 left-0 bg-indigo-600 px-4 py-2 text-white text-sm hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
                        {{room.id}}
                    </div>
                </a>
                <a href="!#">
                    <div
                        class="text-sm absolute top-0 right-0 bg-indigo-600 px-4 text-white rounded-full h-16 w-16 flex flex-col items-center justify-center mt-3 mr-3 hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
                        <span class="font-bold">27</span>
                        <small>March</small>
                    </div>
                </a>
            </div>
        </a>
        <div class="px-6 py-4">
            <a href="#"
                class="font-semibold text-lg inline-block hover:text-indigo-600 transition duration-500 ease-in-out">{{room.name}}</a>
            <p class="text-gray-500 text-sm">
                {{room.desc}}
            </p>
        </div>
        <div class="px-6 py-4 flex flex-row items-center">
            <span href="#" class="py-1 text-sm font-regular text-gray-900 mr-1 flex flex-row items-center">
                <svg height="13px" width="13px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
                    style="enable-background:new 0 0 512 512;" xml:space="preserve">
                    <g>
                        <g>
                            <path d="M256,0C114.837,0,0,114.837,0,256s114.837,256,256,256s256-114.837,256-256S397.163,0,256,0z M277.333,256
      c0,11.797-9.536,21.333-21.333,21.333h-85.333c-11.797,0-21.333-9.536-21.333-21.333s9.536-21.333,21.333-21.333h64v-128
      c0-11.797,9.536-21.333,21.333-21.333s21.333,9.536,21.333,21.333V256z" />
                        </g>
                    </g>
                </svg>
                <span class="ml-1">6 mins ago</span></span>
        </div>
    </div>

    <div class="rounded overflow-hidden border-4 border-red-400 shadow-lg">
        <a href="/room/{{room.id}}">
            <div class="relative">
                <img class="w-full"
                    src="https://images.pexels.com/photos/196667/pexels-photo-196667.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
                    alt="Sunset in the mountains">
                <div
                    class="hover:bg-transparent transition duration-300 absolute bottom-0 top-0 right-0 left-0 bg-gray-900 opacity-25">
                </div>
                <a href="#!">
                    <div
                        class="absolute bottom-0 left-0 bg-indigo-600 px-4 py-2 text-white text-sm hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
                        {{room.id}}
                    </div>
                </a>
                <a href="!#">
                    <div
                        class="text-sm absolute top-0 right-0 bg-indigo-600 px-4 text-white rounded-full h-16 w-16 flex flex-col items-center justify-center mt-3 mr-3 hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
                        <span class="font-bold">27</span>
                        <small>March</small>
                    </div>
                </a>
            </div>
        </a>
        <div class="px-6 py-4">
            <a href="#"
                class="font-semibold text-lg inline-block hover:text-indigo-600 transition duration-500 ease-in-out">{{room.name}}</a>
            <p class="text-gray-500 text-sm">
                {{room.desc}}
            </p>
        </div>
        <div class="px-6 py-4 flex flex-row items-center">
            <span href="#" class="py-1 text-sm font-regular text-gray-900 mr-1 flex flex-row items-center">
                <svg height="13px" width="13px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
                    style="enable-background:new 0 0 512 512;" xml:space="preserve">
                    <g>
                        <g>
                            <path d="M256,0C114.837,0,0,114.837,0,256s114.837,256,256,256s256-114.837,256-256S397.163,0,256,0z M277.333,256
      c0,11.797-9.536,21.333-21.333,21.333h-85.333c-11.797,0-21.333-9.536-21.333-21.333s9.536-21.333,21.333-21.333h64v-128
      c0-11.797,9.536-21.333,21.333-21.333s21.333,9.536,21.333,21.333V256z" />
                        </g>
                    </g>
                </svg>
                <span class="ml-1">6 mins ago</span></span>
        </div>
    </div>

    <div class="rounded overflow-hidden border-4 border-red-400 shadow-lg">
        <a href="/room/{{room.id}}">
            <div class="relative">
                <img class="w-full"
                    src="https://images.pexels.com/photos/196667/pexels-photo-196667.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
                    alt="Sunset in the mountains">
                <div
                    class="hover:bg-transparent transition duration-300 absolute bottom-0 top-0 right-0 left-0 bg-gray-900 opacity-25">
                </div>
                <a href="#!">
                    <div
                        class="absolute bottom-0 left-0 bg-indigo-600 px-4 py-2 text-white text-sm hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
                        {{room.id}}
                    </div>
                </a>
                <a href="!#">
                    <div
                        class="text-sm absolute top-0 right-0 bg-indigo-600 px-4 text-white rounded-full h-16 w-16 flex flex-col items-center justify-center mt-3 mr-3 hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
                        <span class="font-bold">27</span>
                        <small>March</small>
                    </div>
                </a>
            </div>
        </a>
        <div class="px-6 py-4">
            <a href="#"
                class="font-semibold text-lg inline-block hover:text-indigo-600 transition duration-500 ease-in-out">{{room.name}}</a>
            <p class="text-gray-500 text-sm">
                {{room.desc}}
            </p>
        </div>
        <div class="px-6 py-4 flex flex-row items-center">
            <span href="#" class="py-1 text-sm font-regular text-gray-900 mr-1 flex flex-row items-center">
                <svg height="13px" width="13px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
                    style="enable-background:new 0 0 512 512;" xml:space="preserve">
                    <g>
                        <g>
                            <path d="M256,0C114.837,0,0,114.837,0,256s114.837,256,256,256s256-114.837,256-256S397.163,0,256,0z M277.333,256
      c0,11.797-9.536,21.333-21.333,21.333h-85.333c-11.797,0-21.333-9.536-21.333-21.333s9.536-21.333,21.333-21.333h64v-128
      c0-11.797,9.536-21.333,21.333-21.333s21.333,9.536,21.333,21.333V256z" />
                        </g>
                    </g>
                </svg>
                <span class="ml-1">6 mins ago</span></span>
        </div>
    </div>

    <div class="rounded overflow-hidden border-4 border-red-400 shadow-lg">
        <a href="/room/{{room.id}}">
            <div class="relative">
                <img class="w-full"
                    src="https://images.pexels.com/photos/196667/pexels-photo-196667.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
                    alt="Sunset in the mountains">
                <div
                    class="hover:bg-transparent transition duration-300 absolute bottom-0 top-0 right-0 left-0 bg-gray-900 opacity-25">
                </div>
                <a href="#!">
                    <div
                        class="absolute bottom-0 left-0 bg-indigo-600 px-4 py-2 text-white text-sm hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
                        {{room.id}}
                    </div>
                </a>
                <a href="!#">
                    <div
                        class="text-sm absolute top-0 right-0 bg-indigo-600 px-4 text-white rounded-full h-16 w-16 flex flex-col items-center justify-center mt-3 mr-3 hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
                        <span class="font-bold">27</span>
                        <small>March</small>
                    </div>
                </a>
            </div>
        </a>
        <div class="px-6 py-4">
            <a href="#"
                class="font-semibold text-lg inline-block hover:text-indigo-600 transition duration-500 ease-in-out">{{room.name}}</a>
            <p class="text-gray-500 text-sm">
                {{room.desc}}
            </p>
        </div>
        <div class="px-6 py-4 flex flex-row items-center">
            <span href="#" class="py-1 text-sm font-regular text-gray-900 mr-1 flex flex-row items-center">
                <svg height="13px" width="13px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
                    style="enable-background:new 0 0 512 512;" xml:space="preserve">
                    <g>
                        <g>
                            <path d="M256,0C114.837,0,0,114.837,0,256s114.837,256,256,256s256-114.837,256-256S397.163,0,256,0z M277.333,256
      c0,11.797-9.536,21.333-21.333,21.333h-85.333c-11.797,0-21.333-9.536-21.333-21.333s9.536-21.333,21.333-21.333h64v-128
      c0-11.797,9.536-21.333,21.333-21.333s21.333,9.536,21.333,21.333V256z" />
                        </g>
                    </g>
                </svg>
                <span class="ml-1">6 mins ago</span></span>
        </div>
    </div>
</div>

回复收藏 0 原文

娇妻 2025-02-17 20:20:52

也许您放置循环的位置的问题，更改这样的代码以使循环在网格中工作


<div class="grid grid-cols-1 md:grid-cols-3 border-4 border-red-400 lg:grid-cols-4 sm:grid-cols-2 gap-10">
{% for room in rooms %}
    <div class="rounded overflow-hidden border-4 border-red-400 shadow-lg">
        <a href="/room/{{room.id}}">
            <div class="relative">
                <img class="w-full"
                    src="https://images.pexels.com/photos/196667/pexels-photo-196667.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
                    alt="Sunset in the mountains">
                <div
                    class="hover:bg-transparent transition duration-300 absolute bottom-0 top-0 right-0 left-0 bg-gray-900 opacity-25">
                </div>
                <a href="#!">
                    <div
                        class="absolute bottom-0 left-0 bg-indigo-600 px-4 py-2 text-white text-sm hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
                        {{room.id}}
                    </div>
                </a>
                <a href="!#">
                    <div
                        class="text-sm absolute top-0 right-0 bg-indigo-600 px-4 text-white rounded-full h-16 w-16 flex flex-col items-center justify-center mt-3 mr-3 hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
                        <span class="font-bold">27</span>
                        <small>March</small>
                    </div>
                </a>
            </div>
        </a>
        <div class="px-6 py-4">
            <a href="#"
                class="font-semibold text-lg inline-block hover:text-indigo-600 transition duration-500 ease-in-out">{{room.name}}</a>
            <p class="text-gray-500 text-sm">
                {{room.desc}}
            </p>
        </div>
        <div class="px-6 py-4 flex flex-row items-center">
            <span href="#" class="py-1 text-sm font-regular text-gray-900 mr-1 flex flex-row items-center">
                <svg height="13px" width="13px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
                    style="enable-background:new 0 0 512 512;" xml:space="preserve">
                    <g>
                        <g>
                            <path d="M256,0C114.837,0,0,114.837,0,256s114.837,256,256,256s256-114.837,256-256S397.163,0,256,0z M277.333,256
      c0,11.797-9.536,21.333-21.333,21.333h-85.333c-11.797,0-21.333-9.536-21.333-21.333s9.536-21.333,21.333-21.333h64v-128
      c0-11.797,9.536-21.333,21.333-21.333s21.333,9.536,21.333,21.333V256z" />
                        </g>
                    </g>
                </svg>
                <span class="ml-1">6 mins ago</span></span>
        </div>
    </div>
{% endfor %}
</div>

Maybe the problem with the position where you put loop, change your code like this to make loop work inside the grid


<div class="grid grid-cols-1 md:grid-cols-3 border-4 border-red-400 lg:grid-cols-4 sm:grid-cols-2 gap-10">
{% for room in rooms %}
    <div class="rounded overflow-hidden border-4 border-red-400 shadow-lg">
        <a href="/room/{{room.id}}">
            <div class="relative">
                <img class="w-full"
                    src="https://images.pexels.com/photos/196667/pexels-photo-196667.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
                    alt="Sunset in the mountains">
                <div
                    class="hover:bg-transparent transition duration-300 absolute bottom-0 top-0 right-0 left-0 bg-gray-900 opacity-25">
                </div>
                <a href="#!">
                    <div
                        class="absolute bottom-0 left-0 bg-indigo-600 px-4 py-2 text-white text-sm hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
                        {{room.id}}
                    </div>
                </a>
                <a href="!#">
                    <div
                        class="text-sm absolute top-0 right-0 bg-indigo-600 px-4 text-white rounded-full h-16 w-16 flex flex-col items-center justify-center mt-3 mr-3 hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
                        <span class="font-bold">27</span>
                        <small>March</small>
                    </div>
                </a>
            </div>
        </a>
        <div class="px-6 py-4">
            <a href="#"
                class="font-semibold text-lg inline-block hover:text-indigo-600 transition duration-500 ease-in-out">{{room.name}}</a>
            <p class="text-gray-500 text-sm">
                {{room.desc}}
            </p>
        </div>
        <div class="px-6 py-4 flex flex-row items-center">
            <span href="#" class="py-1 text-sm font-regular text-gray-900 mr-1 flex flex-row items-center">
                <svg height="13px" width="13px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
                    style="enable-background:new 0 0 512 512;" xml:space="preserve">
                    <g>
                        <g>
                            <path d="M256,0C114.837,0,0,114.837,0,256s114.837,256,256,256s256-114.837,256-256S397.163,0,256,0z M277.333,256
      c0,11.797-9.536,21.333-21.333,21.333h-85.333c-11.797,0-21.333-9.536-21.333-21.333s9.536-21.333,21.333-21.333h64v-128
      c0-11.797,9.536-21.333,21.333-21.333s21.333,9.536,21.333,21.333V256z" />
                        </g>
                    </g>
                </svg>
                <span class="ml-1">6 mins ago</span></span>
        </div>
    </div>
{% endfor %}
</div>

回复收藏 0 原文

~没有更多了~