插入符号

插入符号

关注
发信
关注(28)粉丝(399)

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

我已经使用Bootstrap下拉列表创建了消息通知。如果您看到我添加了插入符号以表示该插入符号现在属于消息图标，那么当我通常检查包括响应式设计时，插入符号就会从消息通知图标移开。

我希望将插入符号固定在任何设计（包括移动设备）中的消息图标下。

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

P.S：我尝试添加正确的Bootstrap文件，但似乎无法添加它们，这也是为什么我也留下JS小提琴链接的原因！



.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 -->





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

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/

10-13 06:18
Powered by LMLPHP ©2024 插入符号 0.033414