Packery 网格覆盖 Bootstrap 4 个菜单通知下拉菜单
Packery grid overlays Bootstrap 4 menu notifications dropdown
我正在使用 Bootstrap 4 构建一个网站,该网站有一个通知下拉菜单,其目的自然是覆盖页面主体的内容。问题是,即使下拉菜单中有 z-index: 10000,Packery 网格项目仍会继续出现在菜单上。
我一辈子都弄不明白这是为什么,z-index、position:absolute、position:relative 以及我能想到的所有其他技巧的各种组合都失败了。有趣的是,使用 popover.js 的弹出窗口在 Packery 上确实定位正确。
有什么解决方案的建议吗?
由于 Codepen link 需要代码,这里是下拉代码,尽管这对您帮助不大。
<li class="nav-item dropdown dropper">
<a class="nav-link text-light" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-bell">Notifications</i>
</a>
<ul class="dropdown-menu">
<li class="head text-light bg-dark">
<div class="row">
<div class="col-lg-12 col-sm-12 col-12">
<span>Notifications (3)</span>
<a href="" class="float-right">Mark all as read</a>
</div>
</li>
<li class="notification-box">
<div class="row">
<div class="col-lg-3 col-sm-3 col-3 text-center">
<img src="/demo/man-profile.jpg" class="w-50 rounded-circle">
</div>
<div class="col-lg-8 col-sm-8 col-8">
<strong class="text-info">David John</strong>
<div>
Lorem ipsum dolor sit amet, consectetur
</div>
<small class="text-warning">27.11.2015, 15:00</small>
</div>
</div>
</li>
<li class="notification-box bg-gray">
<div class="row">
<div class="col-lg-3 col-sm-3 col-3 text-center">
<img src="/demo/man-profile.jpg" class="w-50 rounded-circle">
</div>
<div class="col-lg-8 col-sm-8 col-8">
<strong class="text-info">David John</strong>
<div>
Lorem ipsum dolor sit amet, consectetur
</div>
<small class="text-warning">27.11.2015, 15:00</small>
</div>
</div>
</li>
<li class="notification-box">
<div class="row">
<div class="col-lg-3 col-sm-3 col-3 text-center">
<img src="/demo/man-profile.jpg" class="w-50 rounded-circle">
</div>
<div class="col-lg-8 col-sm-8 col-8">
<strong class="text-info">David John</strong>
<div>
Lorem ipsum dolor sit amet, consectetur
</div>
<small class="text-warning">27.11.2015, 15:00</small>
</div>
</div>
</li>
<li class="drop-footer bg-dark text-center">
<a href="" class="text-light">View All</a>
</li>
</ul>
</li>
这是 Codepen 的 link,其中有一个页面存在此问题——图标不起作用,因此不存在的图片旁边的 "Notifications" 是相关的落下。 https://codepen.io/redheadedmandy/pen/ZxmxgN
使用 bootstrap 预定义 class .position-relative 来 ul 列表下拉列表 menu.Check 下面的 codepen 工作演示。
<!-- top nav -->
<div class="mainnav">
<nav class="navbar">
<form class="form-inline right-align">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
<ul class="navbar-nav main-ul">
<li class="nav-item dropdown dropper">
<a class="nav-link text-light" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-bell">Notifications</i>
</a>
<ul class="dropdown-menu position-relative">
<li class="head text-light bg-dark">
<div class="row">
<div class="col-lg-12 col-sm-12 col-12">
<span>Notifications (3)</span>
<a href="" class="float-right">Mark all as read</a>
</div>
</li>
<li class="notification-box">
<div class="row">
<div class="col-lg-3 col-sm-3 col-3 text-center">
<img src="/demo/man-profile.jpg" class="w-50 rounded-circle">
</div>
<div class="col-lg-8 col-sm-8 col-8">
<strong class="text-info">David John</strong>
<div>
Lorem ipsum dolor sit amet, consectetur
</div>
<small class="text-warning">27.11.2015, 15:00</small>
</div>
</div>
</li>
<li class="notification-box bg-gray">
<div class="row">
<div class="col-lg-3 col-sm-3 col-3 text-center">
<img src="/demo/man-profile.jpg" class="w-50 rounded-circle">
</div>
<div class="col-lg-8 col-sm-8 col-8">
<strong class="text-info">David John</strong>
<div>
Lorem ipsum dolor sit amet, consectetur
</div>
<small class="text-warning">27.11.2015, 15:00</small>
</div>
</div>
</li>
<li class="notification-box">
<div class="row">
<div class="col-lg-3 col-sm-3 col-3 text-center">
<img src="/demo/man-profile.jpg" class="w-50 rounded-circle">
</div>
<div class="col-lg-8 col-sm-8 col-8">
<strong class="text-info">David John</strong>
<div>
Lorem ipsum dolor sit amet, consectetur
</div>
<small class="text-warning">27.11.2015, 15:00</small>
</div>
</div>
</li>
<li class="drop-footer bg-dark text-center">
<a href="" class="text-light">View All</a>
</li>
</ul>
</li>
<li class="nav-item pic-dropper">
<a href="#" class="nav-link" id="dropdownMenuButton" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img src="images/prof-pic.jpg" class="profpic float-right" alt="Profile picture"></a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
<h6 class="dropdown-header">Dropdown header</h6>
<div class="dropdown-divider"></div>
<ul class="notification-list">
<li class="notification-item">
</li>
</ul>
</div>
</li>
</ul>
</nav>
</div>
我正在使用 Bootstrap 4 构建一个网站,该网站有一个通知下拉菜单,其目的自然是覆盖页面主体的内容。问题是,即使下拉菜单中有 z-index: 10000,Packery 网格项目仍会继续出现在菜单上。
我一辈子都弄不明白这是为什么,z-index、position:absolute、position:relative 以及我能想到的所有其他技巧的各种组合都失败了。有趣的是,使用 popover.js 的弹出窗口在 Packery 上确实定位正确。
有什么解决方案的建议吗?
由于 Codepen link 需要代码,这里是下拉代码,尽管这对您帮助不大。
<li class="nav-item dropdown dropper">
<a class="nav-link text-light" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-bell">Notifications</i>
</a>
<ul class="dropdown-menu">
<li class="head text-light bg-dark">
<div class="row">
<div class="col-lg-12 col-sm-12 col-12">
<span>Notifications (3)</span>
<a href="" class="float-right">Mark all as read</a>
</div>
</li>
<li class="notification-box">
<div class="row">
<div class="col-lg-3 col-sm-3 col-3 text-center">
<img src="/demo/man-profile.jpg" class="w-50 rounded-circle">
</div>
<div class="col-lg-8 col-sm-8 col-8">
<strong class="text-info">David John</strong>
<div>
Lorem ipsum dolor sit amet, consectetur
</div>
<small class="text-warning">27.11.2015, 15:00</small>
</div>
</div>
</li>
<li class="notification-box bg-gray">
<div class="row">
<div class="col-lg-3 col-sm-3 col-3 text-center">
<img src="/demo/man-profile.jpg" class="w-50 rounded-circle">
</div>
<div class="col-lg-8 col-sm-8 col-8">
<strong class="text-info">David John</strong>
<div>
Lorem ipsum dolor sit amet, consectetur
</div>
<small class="text-warning">27.11.2015, 15:00</small>
</div>
</div>
</li>
<li class="notification-box">
<div class="row">
<div class="col-lg-3 col-sm-3 col-3 text-center">
<img src="/demo/man-profile.jpg" class="w-50 rounded-circle">
</div>
<div class="col-lg-8 col-sm-8 col-8">
<strong class="text-info">David John</strong>
<div>
Lorem ipsum dolor sit amet, consectetur
</div>
<small class="text-warning">27.11.2015, 15:00</small>
</div>
</div>
</li>
<li class="drop-footer bg-dark text-center">
<a href="" class="text-light">View All</a>
</li>
</ul>
</li>
这是 Codepen 的 link,其中有一个页面存在此问题——图标不起作用,因此不存在的图片旁边的 "Notifications" 是相关的落下。 https://codepen.io/redheadedmandy/pen/ZxmxgN
使用 bootstrap 预定义 class .position-relative 来 ul 列表下拉列表 menu.Check 下面的 codepen 工作演示。
<!-- top nav -->
<div class="mainnav">
<nav class="navbar">
<form class="form-inline right-align">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
<ul class="navbar-nav main-ul">
<li class="nav-item dropdown dropper">
<a class="nav-link text-light" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-bell">Notifications</i>
</a>
<ul class="dropdown-menu position-relative">
<li class="head text-light bg-dark">
<div class="row">
<div class="col-lg-12 col-sm-12 col-12">
<span>Notifications (3)</span>
<a href="" class="float-right">Mark all as read</a>
</div>
</li>
<li class="notification-box">
<div class="row">
<div class="col-lg-3 col-sm-3 col-3 text-center">
<img src="/demo/man-profile.jpg" class="w-50 rounded-circle">
</div>
<div class="col-lg-8 col-sm-8 col-8">
<strong class="text-info">David John</strong>
<div>
Lorem ipsum dolor sit amet, consectetur
</div>
<small class="text-warning">27.11.2015, 15:00</small>
</div>
</div>
</li>
<li class="notification-box bg-gray">
<div class="row">
<div class="col-lg-3 col-sm-3 col-3 text-center">
<img src="/demo/man-profile.jpg" class="w-50 rounded-circle">
</div>
<div class="col-lg-8 col-sm-8 col-8">
<strong class="text-info">David John</strong>
<div>
Lorem ipsum dolor sit amet, consectetur
</div>
<small class="text-warning">27.11.2015, 15:00</small>
</div>
</div>
</li>
<li class="notification-box">
<div class="row">
<div class="col-lg-3 col-sm-3 col-3 text-center">
<img src="/demo/man-profile.jpg" class="w-50 rounded-circle">
</div>
<div class="col-lg-8 col-sm-8 col-8">
<strong class="text-info">David John</strong>
<div>
Lorem ipsum dolor sit amet, consectetur
</div>
<small class="text-warning">27.11.2015, 15:00</small>
</div>
</div>
</li>
<li class="drop-footer bg-dark text-center">
<a href="" class="text-light">View All</a>
</li>
</ul>
</li>
<li class="nav-item pic-dropper">
<a href="#" class="nav-link" id="dropdownMenuButton" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img src="images/prof-pic.jpg" class="profpic float-right" alt="Profile picture"></a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
<h6 class="dropdown-header">Dropdown header</h6>
<div class="dropdown-divider"></div>
<ul class="notification-list">
<li class="notification-item">
</li>
</ul>
</div>
</li>
</ul>
</nav>
</div>