javascript - 如何修复通知框插入符号?
问题描述
我使用 Bootstrap 下拉菜单创建了一个消息通知。如果您看到我添加了一个插入符号来表示插入符号现在属于消息图标,当我通常检查包括响应式设计时,插入符号会从消息通知图标移开。
我希望在包括移动设备在内的任何设计中将插入符号固定在消息图标下。
有人可以帮我解决这个问题吗?
PS:我尝试添加正确的 Bootstrap 文件,但似乎我无法添加它们,这就是为什么我也要留下一个 JS fiddle 链接!
.top-head {
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
background: #FFFFFF;
width: 100%;
float: left;
height: 50px;
}
.top-head h1 {
color: #fff;
font-size: 26px;
font-weight: 600;
line-height: 50px;
margin-bottom: 0px;
}
.top-menu-right {
float: right;
}
.top-head .user-bar {
text-align: right;
float: right;
}
.top-head .user-bar a {
color: rgba(0, 0, 0, .7);
font-size: 15px;
font-weight: 400;
line-height: 49px;
position: relative;
padding: 0 7px;
}
.top-head .user-bar a:hover {
color: #02b875;
}
.top-head .user-bar a i {
margin-right: 6px;
}
.top-head .user-bar .ping {
background: #02b875;
border-radius: 50%;
height: 10px;
position: absolute;
right: 9px;
top: 13px;
width: 10px;
z-index: 1;
}
.top-head .user-bar img {
float: left;
height: 32px;
width: 32px;
margin-top: 9px;
}
/* DROPDOWN MENU */
.dropbtn {
color: rgba(0, 0, 0, .7);
padding: 13px 7px;
font-size: 15px;
border: none;
margin-top: 0px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #fff;
min-width: 180px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 999;
float: left;
text-align: left;
}
.dropdown-content a {
text-decoration: none;
display: block;
padding: 10px 25px 10px 15px !important;
line-height: 1.42857 !important;
}
.dropdown-content a:hover {
color: #02b875;
text-decoration: none;
background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #fff;
color: #02b875;
}
.dropdown-divider {
height: 0;
margin: 0px;
overflow: hidden;
border-top: 1px solid #e9ecef;
}
.dropdown-menu-arrow {
top: -25px;
left: 27.2%;
width: 0;
height: 0;
position: relative;
}
.dropdown-menu-arrow:before,
.dropdown-menu-arrow:after {
content: "";
position: absolute;
display: block;
width: 0;
height: 0;
border-width: 11px 12px;
border-style: solid;
border-color: transparent;
z-index: 1001;
}
.dropdown-menu-arrow:after {
bottom: -17px;
right: -8px;
border-bottom-color: #fff;
}
.dropdown-menu-arrow:before {
bottom: -16px;
right: -8px;
border-bottom-color: rgba(0, 0, 0, .15);
}
/* ========== Navigation Start ========== */
.account-name {
font-weight: 600;
}
/* NOTIFICATION */
.notification {
color: rgba(0, 0, 0, .7) !important;
font-size: 17px !important;
}
.notification:hover,
.messages:hover {
color: #183247;
}
.notification-imp {
font-weight: 600;
color: #1d2129;
}
.messages {
color: rgba(0, 0, 0, .7) !important;
font-size: 17px !important;
margin-left: -5px !important;
}
/* Message DropBox*/
.message-box {
min-width: 430px;
background-color: #fff;
padding-bottom: 0px;
border-radius: 0px;
border: 1px solid #e2e2e2 !important;
position: absolute !important;
margin-left: -99px;
top: -1px !important;
z-index: 1001;
}
/* Message Heading */
.message-box .msg-title {
border-bottom: 1px solid #e2e2e2;
padding: 0px 15px 8px 15px;
font-size: 13px;
}
/* Message Notification */
.messages-noti {
font-weight: 600;
}
/* Message Content */
.message-box .msg-box-content {
min-height: 380px;
max-height: 280px;
overflow-y: scroll;
z-index: 1001;
}
/* Message Image Container */
.msg-box-content .msg-img {
float: left;
display: inline-block;
width: 55px;
height: 45px;
margin: 0px 0px 8px 0px;
}
/* Messsage Image */
.msg-box-content .msg-img img {
width: 40px;
height: 40px;
}
.message-box .msg-box-content a {
display: block;
font-size: 13px;
font-weight: 600;
padding-top: 10px;
padding-bottom: 5px;
padding-right: 17px;
padding-left: 0px;
line-height: inherit;
border-bottom: 1px solid #e2e2e2;
}
.message-box .msg-box-content a:hover {
color: rgb(0, 0, 0, .7);
background-color: #fafafa;
text-decoration: none;
}
.message-box .msg-box-content .pd-l0 {
padding-left: 0px;
}
/* Message box scroller hides */
.message-box .msg-box-content::-webkit-scrollbar,
.message-box .msg-box-content::-webkit-scrollbar-thumb {
display: none;
}
.message-box .msg-box-content p {
font-size: 13px;
color: #1d2129;
font-weight: normal;
margin: 1px 0px 8px 0px;
}
.message-box .msg-box-content p.time {
font-size: 12px;
font-weight: 600;
margin: 0px -55px 0px 0px;
position: relative;
display: inline-block;
color: #90949c;
}
/* Unread Notification */
.message-box .msg-box-content>a:nth-child(2n+0) {
background-color: #fafafa;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<div class="top-head fixed-top">
<div class="container container-responsive">
<div class="row">
<div class="col-md-10 col-lg-9 user-bar">
<div class="top-menu-right">
<nav class="nav nav-inline">
<a href="register.php" class="nav-link">Register</a>
<a href="login.php" class="nav-link">Login</a>
<!-- START OF MESSAGES NOTIFICATIONS -->
<div class="dropdown">
<a href="#" class="nav-link messages" data-toggle="dropdown"><span class="ping"></span><i class="far fa-comment-alt"></i></a>
<div class="dropdown-menu message-box">
<span class="dropdown-menu-arrow"></span>
<div class="msg-title">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6">Messages (<span class="messages-noti">4</span>)</div>
</div>
</div>
<div class="msg-box-content">
<!-- Message Block -->
<a href="subscription.php">
<!-- User Image -->
<div class="col-3">
<div class="msg-img">
<img src="http://grafreez.com/wp-content/temp_demos/river/img/admin-bg.jpg">
</div>
</div>
<!-- User Name -->
<div class="col-9 pd-l0 float-left">
<span class="col-6 pl-0">
John Smith
</span>
<!-- Timestamp -->
<span class="col-6">
<p class="time float-right">2m ago</p>
</span>
</div>
<!-- User Message -->
<div class="col-12">
<p>Hey! Can you please send me your Post Code and your ...</p>
</div>
</a>
<a href="subscription.php">
<div class="col-3">
<div class="msg-img">
<img src="http://grafreez.com/wp-content/temp_demos/river/img/admin-bg.jpg">
</div>
</div>
<div class="col-9 pd-l0 float-left">
<span class="col-6 pl-0">
John Smith
</span>
<span class="col-6">
<p class="time float-right">2m ago</p>
</span>
</div>
<div class="col-12">
<p>Hey! Can you please send me your Post Code and your ...</p>
</div>
</a>
<a href="subscription.php">
<div class="col-3">
<div class="msg-img">
<img src="http://grafreez.com/wp-content/temp_demos/river/img/admin-bg.jpg">
</div>
</div>
<div class="col-9 pd-l0 float-left">
<span class="col-6 pl-0">
John Smith
</span>
<span class="col-6">
<p class="time float-right">2m ago</p>
</span>
</div>
<div class="col-12">
<p>Hey! Can you please send me your Post Code and your ...</p>
</div>
</a>
</div>
</div>
</div>
<!-- END OF MESSAGES NOTIFICATIONS -->
</nav>
<!-- END OF NAV BAR -->
</div>
<!-- END OF TOP MENU RIGHT -->
</div>
<!-- END OF COLUMN USER-BAR -->
</div>
<!-- END OF ROW -->
</div>
<!-- END OF CONTAINER -->
</div>
<!-- END OF NAVIGATION -->
解决方案
大多数 HTML 开发人员都有这个问题,但解决方案非常简单,您无需在隐藏容器中添加箭头图标。您应该在单击/悬停的按钮底部添加箭头图标。它不会干扰用户界面。我只是更新了您的代码,并进行了一些更改,希望对您有所帮助。谢谢
.top-head {
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
background: #FFFFFF;
width: 100%;
float: left;
height: 50px;
}
.top-head h1 {
color: #fff;
font-size: 26px;
font-weight: 600;
line-height: 50px;
margin-bottom: 0px;
}
.top-menu-right {
float: right;
}
.top-head .user-bar {
text-align: right;
float: right;
}
.top-head .user-bar a {
color: rgba(0, 0, 0, .7);
font-size: 15px;
font-weight: 400;
line-height: 49px;
position: relative;
padding: 0 7px;
}
.top-head .user-bar a:hover {
color: #02b875;
}
.top-head .user-bar a i {
margin-right: 6px;
}
.top-head .user-bar .ping {
background: #02b875;
border-radius: 50%;
height: 10px;
position: absolute;
right: 9px;
top: 13px;
width: 10px;
z-index: 1;
}
.top-head .user-bar img {
float: left;
height: 32px;
width: 32px;
margin-top: 9px;
}
/* DROPDOWN MENU */
.dropbtn {
color: rgba(0, 0, 0, .7);
padding: 13px 7px;
font-size: 15px;
border: none;
margin-top: 0px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #fff;
min-width: 180px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 999;
float: left;
text-align: left;
}
.dropdown-content a {
text-decoration: none;
display: block;
padding: 10px 25px 10px 15px !important;
line-height: 1.42857 !important;
}
.dropdown-content a:hover {
color: #02b875;
text-decoration: none;
background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #fff;
color: #02b875;
}
.dropdown-divider {
height: 0;
margin: 0px;
overflow: hidden;
border-top: 1px solid #e9ecef;
}
.dropdown-menu-arrow {
display: none;
bottom: 16px;
left: 20px;
position: absolute;
z-index: 1002;
}
.dropdown-menu-arrow:before,
.dropdown-menu-arrow:after {
content: "";
position: absolute;
display: block;
width: 0;
height: 0;
border-width: 11px 12px;
border-style: solid;
border-color: transparent;
z-index: 1001;
}
.dropdown-menu-arrow:after {
bottom: -17px;
right: -8px;
border-bottom-color: #fff;
}
.dropdown-menu-arrow:before {
bottom: -16px;
right: -8px;
border-bottom-color: rgba(0, 0, 0, .15);
}
/* ========== Navigation Start ========== */
.account-name {
font-weight: 600;
}
/* NOTIFICATION */
.notification {
color: rgba(0, 0, 0, .7) !important;
font-size: 17px !important;
}
.notification:hover,
.messages:hover {
color: #183247;
}
.notification-imp {
font-weight: 600;
color: #1d2129;
}
.messages {
color: rgba(0, 0, 0, .7) !important;
font-size: 17px !important;
margin-left: -5px !important;
}
/* Message DropBox*/
.message-box {
min-width: 430px !important;
background-color: #fff;
padding-bottom: 0px;
border-radius: 0px;
border: 1px solid #e2e2e2 !important;
position: absolute !important;
margin-left: -99px;
top: 42px !important;
z-index: 1001;
}
/* Message Heading */
.message-box .msg-title {
border-bottom: 1px solid #e2e2e2;
padding: 0px 15px 8px 15px;
font-size: 13px;
}
/* Message Notification */
.messages-noti {
font-weight: 600;
}
/* Message Content */
.message-box .msg-box-content {
min-height: 380px;
max-height: 280px;
overflow-y: scroll;
z-index: 1001;
}
/* Message Image Container */
.msg-box-content .msg-img {
float: left;
display: inline-block;
width: 55px;
height: 45px;
margin: 0px 0px 8px 0px;
}
/* Messsage Image */
.msg-box-content .msg-img img {
width: 40px;
height: 40px;
}
.message-box .msg-box-content a {
display: block;
font-size: 13px;
font-weight: 600;
padding-top: 10px;
padding-bottom: 5px;
padding-right: 17px;
padding-left: 0px;
line-height: inherit;
border-bottom: 1px solid #e2e2e2;
}
.message-box .msg-box-content a:hover {
color: rgb(0, 0, 0, .7);
background-color: #fafafa;
text-decoration: none;
}
.message-box .msg-box-content .pd-l0 {
padding-left: 0px;
}
/* Message box scroller hides */
.message-box .msg-box-content::-webkit-scrollbar,
.message-box .msg-box-content::-webkit-scrollbar-thumb {
display: none;
}
.message-box .msg-box-content p {
font-size: 13px;
color: #1d2129;
font-weight: normal;
margin: 1px 0px 8px 0px;
}
.message-box .msg-box-content p.time {
font-size: 12px;
font-weight: 600;
margin: 0px -55px 0px 0px;
position: relative;
display: inline-block;
color: #90949c;
}
.dropdown.show .dropdown-menu-arrow {
display: block;
}
/* Unread Notification */
.message-box .msg-box-content>a:nth-child(2n+0) {
background-color: #fafafa;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet">
<link href="//use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<div class="top-head fixed-top">
<div class="container container-responsive">
<div class="row">
<div class="col-md-10 col-lg-9 user-bar">
<div class="top-menu-right">
<nav class="nav nav-inline">
<a href="register.php" class="nav-link">Register</a>
<a href="login.php" class="nav-link">Login</a>
<!-- START OF MESSAGES NOTIFICATIONS -->
<div class="dropdown">
<a href="#" class="nav-link messages" data-toggle="dropdown">
<span class="ping"></span>
<i class="far fa-comment-alt"></i>
<span class="dropdown-menu-arrow"></span>
</a>
<div class="dropdown-menu message-box">
<div class="msg-title">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6">Messages (<span class="messages-noti">4</span>)</div>
</div>
</div>
<div class="msg-box-content">
<!-- Message Block -->
<a href="subscription.php">
<!-- User Image -->
<div class="col-3">
<div class="msg-img">
<img src="http://grafreez.com/wp-content/temp_demos/river/img/admin-bg.jpg">
</div>
</div>
<!-- User Name -->
<div class="col-9 pd-l0 float-left">
<span class="col-6 pl-0">
John Smith
</span>
<!-- Timestamp -->
<span class="col-6">
<p class="time float-right">2m ago</p>
</span>
</div>
<!-- User Message -->
<div class="col-12">
<p>Hey! Can you please send me your Post Code and your ...</p>
</div>
</a>
<a href="subscription.php">
<div class="col-3">
<div class="msg-img">
<img src="http://grafreez.com/wp-content/temp_demos/river/img/admin-bg.jpg">
</div>
</div>
<div class="col-9 pd-l0 float-left">
<span class="col-6 pl-0">
John Smith
</span>
<span class="col-6">
<p class="time float-right">2m ago</p>
</span>
</div>
<div class="col-12">
<p>Hey! Can you please send me your Post Code and your ...</p>
</div>
</a>
<a href="subscription.php">
<div class="col-3">
<div class="msg-img">
<img src="http://grafreez.com/wp-content/temp_demos/river/img/admin-bg.jpg">
</div>
</div>
<div class="col-9 pd-l0 float-left">
<span class="col-6 pl-0">
John Smith
</span>
<span class="col-6">
<p class="time float-right">2m ago</p>
</span>
</div>
<div class="col-12">
<p>Hey! Can you please send me your Post Code and your ...</p>
</div>
</a>
</div>
</div>
</div>
<!-- END OF MESSAGES NOTIFICATIONS -->
</nav>
<!-- END OF NAV BAR -->
</div>
<!-- END OF TOP MENU RIGHT -->
</div>
<!-- END OF COLUMN USER-BAR -->
</div>
<!-- END OF ROW -->
</div>
<!-- END OF CONTAINER -->
</div>
<!-- END OF NAVIGATION -->
推荐阅读
- c# - WCF 中的 HTTP 响应异常
- angular - Angular 6 fxflex 不适用于 ngif div(如果显示 div,则 fxflex 未应用)
- html - 如何让 3 个盒子在较小的设备上相互叠放?
- guid-partition-table - 应该如何解释分区类型 GUID?
- ios - Warning: Incompatible pointer types assigning to 'NSMutableArray *' from 'NSArray
* _Nullable' - ios - 我可以在没有开发帐户的情况下编译具有高级功能的 iOS 应用程序吗?
- android - 搜索后获取列表视图的计数
- linux - 在linux上增加最大java线程
- .net - Visual Studio .NET 源代码调试引用不存在的 F 驱动器
- maven - 如何独立于其他模块发布 Maven 模块?