时间戳

首页 > 解决方案 > 如何在 Bootstrap 4 中修复这个列表组？

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

问题描述

我在这段代码中有 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>

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

标签： htmltwitter-bootstrapcssbootstrap-4

解决方案

  1. 用于 margin: auto;包装图标的 div看这里

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

  2. event.stopPropagation();在点击图标上使用（在您的代码之后使用它）

例如：

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

在 html 中发送eventto 函数：

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

推荐阅读