如何以响应速度将列表项水平放置在引导卡中

问题描述

在我的角度应用程序中，我创建了仪表板页面。在该页面中，我必须放置两个来自后端的列表项（用户名，IP，lastlogin，持续时间，超级用户列表的位置和用户列表的相同项）在一排。

现在，我想在两行中使用两个引导卡，在这些卡中，我要放置上面提到的列表项，并且应该有响应。

注意：两张卡片必须在该行内占据8个网格长度

我已经创建了表格，但是未正确对齐，如下所示：

.component.html

<div class="row">
 <div class="col-xs-12 col-sm-8 col-lg-4">
<table class="table table-responsive" >
          <thead>
            <tr>
              <th scope="col">Username</th>
              <th scope="col">Login IP</th>
              <th scope="col">Last_Login</th>
              <th scope="col">Location</th>
              <th scope="col">Duration</th>
        
            </tr>
          </thead>
          <tbody>
            <tr  *ngFor="let list1 of superuser | slice:0:5">
              <td style="color: white;">{{list1.username}}</td>
              <td>{{list1.login_ip}}</td>  
              <td>{{list1.last_login}}</td>
               <td>{{list1.location}}</td>  
               <td>{{list1.duration}}</td>    
            </tr>
           
          </tbody>
        </table>
        </div>
<div class="col-xs-12 col-sm-8 col-lg-4">

        <table class="table table-responsive" >
          <thead>
            <tr>
              <th scope="col">Username</th>
              <th scope="col">Login IP</th>
              <th scope="col">Last_Login</th>
              <th scope="col">Location</th>
              <th scope="col">Duration</th>
        
            </tr>
          </thead>
          <tbody>
            <tr  *ngFor="let list2 of user">
              <td style="color: white;">{{list2.username}}</td>
              <td>{{list2.login_ip}}</td>  
              <td>{{list2.last_login}}</td>
               <td>{{list2.location}}</td>  
               <td>{{list2.duration}}</td>    
            </tr>
           
          </tbody>
        </table>
        </div>

</div>

但是我不想将列表放置在表格中（如上所示），我想将这些列表放置在具有响应能力的卡片中

我尝试但未正确显示所需数据。

有人可以帮我吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）