javascript - 如何修复通知框插入符号？

标签 javascript html css twitter-bootstrap

我使用 Bootstrap 下拉菜单创建了一个消息通知。如果您看到我现在添加了一个插入符号来表示该插入符号现在属于消息图标，而当我通常检查包括响应式设计时插入符号会从消息通知图标移开。

我希望插入符固定在任何设计(包括移动设备)中的消息图标下方。

有人可以帮我解决这个问题吗？

P.S:我尝试添加正确的 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 -->

enter image description here

https://jsfiddle.net/dmronev0/

最佳答案

大多数 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 -->

关于javascript - 如何修复通知框插入符号？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55463448/

上一篇：javascript - 是否有原因导致括号运算符 [] 可能无法在 React 组件中与 getElementsByClassName() 一起使用？

下一篇：php - 在 Woocommerce 单个产品上同步多个 ajax 添加到购物车按钮

相关文章：

javascript - 为什么我的 .text() 操作在 AJAX 调用后不起作用？

javascript - 如何让 onkeyup 只是一个字母键？

javascript - Firebase 安全 : Permission Denied Until Page Refresh

javascript - 在 magento 管理后端取消 merge css 和 js 文件

android - 在 WebView 完全膨胀之前发生的媒体查询

javascript - 如何获取元素的内容(包括监听器)

javascript - 在 IE 页面加载时提前调用 javascript 函数

html - 对页面上显示的信息进行排序

css - material-ui中的设备宽度和高度

html - CSS移动导航没有垂直居中，但是前面的元素都不错

©2024 IT工具网  联系我们