Question

我正在卡片盒内打印一些list-group-items，如下图所示，它未正确对齐。我正在使用Bootstrap4。我的目标是将所有3个字段对齐在一个整齐的选项卡式列中。也欢迎其他建议。

我使用|符号作为分隔符。这是我已经完成的代码。

<!--HTML-->
<body>

<div class="containers">
  <div class="container-fluid">
    <div class="row">
      <div class="col-6">
        <div class="card">
          <div class="card-header py-2">Testcases</div>
          <div id="rightContainer" class="list-group" style="height:425px; overflow-y: scroll">
            <!--Populated by JS function -->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

</body>

下面是用于填充上述卡片容器的脚本。（为什么这样填充？因为需要进行一些选择，所以我需要通过AJAX将其发送到后端，对此响应将调用成功函数，该函数将调用populate_rightcontainer()）：

<!--SCRIPT-->

<script>
  function populate_rightcontainer(response) {
    $("#rightContainer > a").removeClass("active");
    $("#rightContainer > a").hide();
    $("#rightContainer").empty();
    for (i = 0; i < response.length; i++) {
      var str = response[i].replace(/\s+/g, "");
      var arr = str.split("|");
      var testcase = arr[0] + "  |  " + arr[1] + "  |  " + arr[2];
      if (arr[2] == "Passed") {
        $("#rightContainer").append('<a class="list-group-item list-group-item-success py-0">' + testcase + "</a>");
      }
      if (arr[2] == "Failed") {
        $("#rightContainer").append('<a class="list-group-item list-group-item-danger py-0">' + testcase + "</a>");
      }
    }
  }
</script>

当前看起来不是很漂亮： container of list-group-items

您可以帮助/建议/修改我的容器对齐列吗？

这是我的代码的Plnkr：

http://plnkr.co/edit/EumtRHhzNb4nEFhScWjY?p=preview

P.S：奖励解决方案是当我尝试按|进行拆分时，除非我替换/删除了空间，否则该方法不起作用，如上图所示，我弄乱了时间戳。我现在不知道该如何解决。

Answer 1

您想要的甚至不是仅靠CSS就能实现的，它需要用HTML来完成。为什么不将其重建为ACTUAL表？

类似这样的东西：

<table>
  <tr class="red">
    <td>
      <a href="#">arr[0]</a>
    </td>
    <td>
      <a href="#">arr[1]</a>
    </td>
    <td>
      <a href="#">arr[2]</a>
    </td>
  </tr>
</table>

编辑：到这里：http://next.plnkr.co/edit/xDIdHnC5tU5lGYPg?p=preview

HTML：

<table id="rightContainer" style="height:225px; overflow-y: scroll">

JS：

  function populate_rightcontainer(myJSON){
    $("#rightContainer").empty();   
    var data = myJSON.data;
    for(i=0; i<data.length; i++){
        var str = data[i].replace(/\s+/g,'');
        var arr = str.split('|');
        var row = $('<tr></tr>');
        var elementOne = $('<td>' +arr[0] + '</td>');
        var elementTwo = $('<td>' +arr[1] + '</td>');
        var elementThree = $('<td>' +arr[2] + '</td>');
        row.append(elementOne);
        row.append(elementTwo);
        row.append(elementThree);
        $("#rightContainer").append(row);               
        if(arr[2] == "Passed"){
            row.addClass('list-group-item-success');
        }
        if(arr[2] == "Failed"){ 
            row.addClass('list-group-item-danger');
        }
    }
  }

如何在列表组项目中对齐我的列表以打印出漂亮的

1 个答案: