小编ale*_*025的帖子

Bootstrap 4 的水平列表在 4 个项目后转到下一行

这是清单 嗨,我想让那个水平列表在 4 个项目后转到下一行。这是生成列表的代码:

<div class="list-group list-group-flush list-group-horizontal-xl">
    {% for subject, color in subjects.items() %}
    <div class="list-group-item list-dark-flush" style="align-items: center; display: flex"><div class="picker" data-initialColor="{{color if not color == 'none' else '#03A9F4'}}"></div> <span>{{subject}}</span></div>
    {% endfor %}
</div>
Run Code Online (Sandbox Code Playgroud)

我正在使用 Bootstrap 4 和 Flask。

提前致谢。

html css flask bootstrap-4

3
推荐指数
1
解决办法
1741
查看次数

如何使用 Tailwind CSS 在模式上显示下拉菜单

我正在使用 Tailwind CSS,我想在模式上显示白色下拉菜单。我尝试使用z-index但无法使其工作。

有任何想法吗?

莫代尔

这是我的模态代码:

<TransitionRoot as="template" :show="isOpen">
<Dialog as="div" class="inset-0 fixed overflow-y-auto">
  <div class="flex min-h-screen text-center px-4 pt-4 pb-20 items-end justify-center sm:p-0 sm:block">
    <TransitionChild as="template" enter="ease-out duration-300" enter-from="opacity-0" enter-to="opacity-100" leave="ease-in duration-200" leave-from="opacity-100" leave-to="opacity-0">
      <DialogOverlay class="bg-gray-975 bg-opacity-85 inset-0 transition-opacity fixed" />
    </TransitionChild>

    <!-- This element is to trick the browser into centering the modal contents. -->
    <span class="hidden sm:h-screen sm:inline-block sm:align-middle" aria-hidden="true">&#8203;</span>
    <TransitionChild as="template" enter="ease-out duration-300" enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" enter-to="opacity-100 translate-y-0 sm:scale-100" leave="ease-in duration-200" leave-from="opacity-100 translate-y-0 sm:scale-100" …
Run Code Online (Sandbox Code Playgroud)

html css vue.js tailwind-css headless-ui

2
推荐指数
1
解决办法
4712
查看次数

标签 统计

css ×2

html ×2

bootstrap-4 ×1

flask ×1

headless-ui ×1

tailwind-css ×1

vue.js ×1