html - 如何在 Bootstrap 4 中修复这个列表组？

Question

我在这段代码中有 2 个问题需要修复。

1) 我想在 li 中垂直居中移动图标

2) 我不确定如何克服与链接相关的挑战。如您所见，我已将整个 li 添加到 a 标签中。我想让用户在单击该聊天时导航到该聊天，但同时我想让他们将通知标记为已读或通过单击同一 li 中的正确图标将其删除我在两个图标上都添加了点击事件但不确定整个 li 的标签是否能让它正常工作。

代码如下:

section {
  background: #2193b0;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #6dd5ed, #2193b0);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #6dd5ed, #2193b0);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  padding-top: 5%;
  width: 100%;
  height: 100vh;
}

.emp-profile {
  border-radius: 0.5rem;
  background: #fff;
  padding: 5%
}

.profile-img {
  text-align: center;
}

.profile-img img {
  width: 100%;
  height: 100%;
}

.material-icons {
  color: #2193b0 !important;
  cursor: pointer;
  margin-left: 30px;
}

.list-group li {
  padding: 10px 50px
}

.list-group li p {
  color: #222222
}

.list-group li a {
  text-decoration: none;
}

.toolbar-scroll {
  overflow-y: auto;
}

#toolbar-content {
  display: flex;
  flex-direction: row
}

.message {
  display: flex;
  flex-direction: column;
}

#list-group {
  flex: 1 1;
}

.chat {
  display: flex;
  flex-direction: row;
}

.chat img {
  width: 50px;
  height: 50px;
  margin-right: 10px;
  border: 1px solid #222222
}

.chat .username {
  font-size: 16px;
  font-weight: bold;
  color: #2193b0;
}

.chat .letter {
  margin-top: 0;
  padding-top: 0
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">


<section>
  <div class="container">
    <div class="emp-profile justify-content-center">
      <div class="row">
        <div class="col-md-8">
          <ul class="list-group clearfix">
            <li class="list-group-item justify-content-center align-items-center mx-auto">
              <a class=" chat" href="#">

                <img src="http://emilcarlsson.se/assets/donnapaulsen.png" class="rounded-circle">
                <div class='message'>
                  <h3 class="d-xs-none username">Jessica</h3>
                  <p class="d-xs-none letter">StanIsLove aaaaaaaaaaaaaaaaa.</p>
                </div>
                <div class="float-right">
                  <i class="material-icons" (click)="MarkNotication(data)" [ngClass]="data.read ? 'disabled': 'notDisbled'">
                check
              </i>
                  <i class="material-icons" (click)="DeleteNotification(data)">
                delete_forever
              </i>
                </div>
              </a>
            </li>
          </ul>
        </div>

      </div>
    </div>
  </div>
</section>

我该如何解决这 2 个问题？我也在评论中添加了完整的代码链接。

Answer 1

1. 使用margin: auto; 包裹图标的div see here

   (我添加了新的类调用 margin 并在 css .margin{margin: auto;} 中设置)

2. 使用 event.stopPropagation();单击图标(在您的代码后使用它)

例如:

function MarkNotication(data,event){
   // your code to mark then:
   event.stopPropagation();
}

在 html 中发送 event 函数:

  <i class="material-icons" (click)="MarkNotication(data,event)" [ngClass]="data.read ? 'disabled': 'notDisbled'">
    check
  </i>