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

我在这段代码中有两个问题需要解决

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

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

代码如下：

部分{
背景：#2193b0；
/*旧浏览器的回退*/
背景：-webkit线性梯度（向右，#6dd5ed，#2193b0）；
/*Chrome 10-25，Safari 5.1-6*/
背景：线性梯度（向右，#6dd5ed，#2193b0）；
/*W3C、IE 10+/Edge、Firefox 16+、Chrome 26+、Opera 12+、Safari 7+*/
垫面：5%；
宽度：100%；
高度：100vh；
}
.环境管理计划简介{
边界半径：0.5雷姆；
背景：#fff；
填充：5%
}
.个人资料{
文本对齐：居中；
}
.个人资料img img{
宽度：100%；
身高：100%；
}
.材质图标{
颜色：#2193b0！重要；
光标：指针；
左边距：30px；
}
李组{
填充：10px 50px
}
.list组LIP{
颜色：#22222
}
.李亚群{
文字装饰：无；
}
.工具栏滚动条{
溢出y：自动；
}
#工具栏内容{
显示器：flex；
弯曲方向：行
}
.留言{
显示器：flex；
弯曲方向：立柱；
}
#列表组{
弹性：1；
}
.聊天{
显示器：flex；
弯曲方向：行；
}
.聊天img{
宽度：50px；
高度：50px；
右边距：10px；
边框：1px实心#22222
}
.chat.username{
字体大小：16px；
字体大小：粗体；
颜色：#2193b0；
}
.聊天.写信{
边际上限：0；
填充顶部：0
}

使用

边距：自动以包装图标的div

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

单击时使用图标（在代码后使用）

例如：

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

在html中，将

事件发送到函数：

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


检查

使用
边距：自动以包装图标的div

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


单击时使用图标（在代码后使用）


例如：

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

在html中，将
事件发送到函数：

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


检查

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

.材质图标{
高度：100px；
线高：100px；
}

确保
height==行高

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

.材质图标{
高度：100px；
线高：100px；
}

确保
height==line height
您可以将类
d-flex
和
align items center
添加到图标容器中，以便将它们垂直居中


部分{
背景：#2193b0；
/*旧浏览器的回退*/
背景：-webkit线性梯度（向右，#6dd5ed，#2193b0）；
/*Chrome 10-25，Safari 5.1-6*/
背景：线性梯度（向右，#6dd5ed，#2193b0）；
/*W3C、IE 10+/Edge、Firefox 16+、Chrome 26+、Opera 12+、Safari 7+*/
垫面：5%；
宽度：100%；
高度：100vh；
}
.环境管理计划简介{
边界半径：0.5雷姆；
背景：#fff；
填充：5%
}
.个人资料{
文本对齐：居中；
}
.个人资料img img{
宽度：100%；
身高：100%；
}
.材质图标{
颜色：#2193b0！重要；
光标：指针；
左边距：30px；
}
李组{
填充：10px 50px
}
.list组LIP{
颜色：#22222
}
.李亚群{
文字装饰：无；
}
.工具栏滚动条{
溢出y：自动；
}
#工具栏内容{
显示器：flex；
弯曲方向：行
}
.留言{
显示器：flex；
弯曲方向：立柱；
}
#列表组{
弹性：1；
}
.聊天{
显示器：flex；
弯曲方向：行；
}
.聊天img{
宽度：50px；
高度：50px；
右边距：10px；
边框：1px实心#22222
}
.chat.username{
字体大小：16px；
字体大小：粗体；
颜色：#2193b0；
}
.聊天.写信{
边际上限：0；
填充顶部：0
}





您可以将类
d-flex
和
对齐项目中心
添加到图标容器中，以便垂直居中：


部分{
背景：#2193b0；
/*旧浏览器的回退*/
背景：-webkit线性梯度（向右，#6dd5ed，#2193b0）；
/*Chrome 10-25，Safari 5.1-6*/
背景：线性梯度（向右，#6dd5ed，#2193b0）；
/*W3C、IE 10+/Edge、Firefox 16+、Chrome 26+、Opera 12+、Safari 7+*/
垫面：5%；
宽度：100%；
高度：100vh；
}
.环境管理计划简介{
边界半径：0.5雷姆；
背景：#fff；
填充：5%
}
.个人资料{
文本对齐：居中；
}
.个人资料img img{
宽度：100%；
身高：100%；
}
.材质图标{
颜色：#2193b0！重要；
光标：指针；
左边距：30px；
}
李组{
填充：10px 50px
}
.list组LIP{
颜色：#22222
}
.李亚群{
文字装饰：无；
}
.工具栏滚动条{
溢出y：自动；
}
#工具栏内容{
显示器：flex；
弯曲方向：行
}
.留言{
显示器：flex；
弯曲方向：立柱；
}
#列表组{
弹性：1；
}
.聊天{
显示器：flex；
弯曲方向：行；
}
.聊天img{
宽度：50px；
高度：50px；
右边距：10px；
边框：1px实心#22222
}