为什么 Bootstrap .ratio 会导致 img 出现在 offcanvas 菜单上?

问题描述 投票:0回答:0

如何阻止比例图像出现在画布菜单上方?

使用 Bootstrap 5,强制图像为 16x9...

    <div class="ratio ratio-16x9 my-3">
         <img width="768" height="432" src="my-image.jpg" class="object-fit-cover img-fluid w-100 wp-post-image" alt="" decoding="async" itemprop="image" sizes="(max-width: 768px) 100vw, 768px">
    </div>

...使图像出现over我的offcanvas菜单...

    <div class="offcanvas-md offcanvas-end sticky-md-top show" tabindex="-1" id="offcanvasResponsive"
        aria-labelledby="offcanvasResponsiveLabel" aria-modal="true" role="dialog">
        <div class="offcanvas-header border-bottom">
            <h5 class="offcanvas-title " id="offcanvasResponsiveLabel">
                <span id="site-title-offcanvas" itemprop="publisher" itemscope=""
                    itemtype="https://schema.org/Organization">
                    <a href="http://example.com/" title="My Site" rel="home" itemprop="url" class="navbar-brand"><span
                            itemprop="name">My Site</span></a> </span>
            </h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#offcanvasResponsive"
                aria-label="Close"></button>
        </div>
        <div class="offcanvas-body d-block vh-100 overflow-y-auto">
            <nav role="navigation" itemscope="" itemtype="https://schema.org/SiteNavigationElement">
                <ul class="list-unstyled m-3">
                    <li class="mb-2">
                        <a itemprop="url" data-bs-toggle="collapse" data-bs-target="#category-collapse" href="#"
                            class="nav-link sidebar-parent d-flex collapsed" aria-expanded="true">
                            <div class="flex-fill">
                                <i class="menu-icon fa-fw fa-solid fa-desktop"></i>
                                <span class="text" itemprop="name">Categories</span>
                            </div>
                        </a>
                        <!-- And more menu content -->
            </nav>
        </div>
    </div>

在我应用比率之前并没有发生,当我删除它们时,排序很好。

.offcanvas-md
带有
z-index: var(--bs-offcanvas-zindex);
将此更改为任何数字(例如 1050)并将较小的数字(例如
z-index: 4
)应用于
.ratio
不会导致正确的排序。

改变图像的

position
值似乎也不起作用。

css twitter-bootstrap bootstrap-5 off-canvas-menu
© www.soinside.com 2019 - 2024. All rights reserved.