Question

此代码中有2个要修复的问题。

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

2）我不确定如何克服与链接有关的挑战。如您所见，我已经在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>

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

Answer 1

使用margin: auto;包装图标see here的div

（我添加了新的类调用margin，并在CSS .margin{margin: auto;}中进行了设置）
在点击图标上使用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>

Answer 2

您可以通过添加以下内容轻松地将图标垂直居中：

.material-icons { 高度：100px；行高：100px； }

确保height == line-height。

Answer 3

您可以将类d-flex和align-items-center添加到图标的容器中，以将它们垂直居中：

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 href="https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/material-icons.min.css" rel="stylesheet"/>
<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 d-flex align-items-center">
                  <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>

如何在Bootstrap 4中修复此列表组？

3 个答案: