动态引导划分看起来像一个两列表

Question

所以我在网上搜索过但找不到我要找的东西，也请原谅我，因为我真的不知道如何给这个明确的标题，因为我想要的是具体的。

我有大量数据（来自 sqlserver db）要显示给我网站的用户，我决定显示数据的最佳方式是采用两列格式，所以左右都是分区.

<div class="leftCol">
  <div class="row" id="left1" runat="server">
    <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">Title</div>
    <div class="col-xs-7 col-sm-7 col-md-7 col-lg-7">Data</div>
  </div>
  <div class="row" id="left2" runat="server">
    <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">Title</div>
    <div class="col-xs-7 col-sm-7 col-md-7 col-lg-7">Data</div>
  </div>
  <div class="row" id="left3" runat="server">
    <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">Title</div>
    <div class="col-xs-7 col-sm-7 col-md-7 col-lg-7">Data</div>
  </div>
</div>
<div class="rightCol">
  <div class="row" id="right1" runat="server">
    <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">Title</div>
    <div class="col-xs-7 col-sm-7 col-md-7 col-lg-7">Data</div>
  </div>
  <div class="row" id="right2" runat="server">
    <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">Title</div>
    <div class="col-xs-7 col-sm-7 col-md-7 col-lg-7">Data</div>
  </div>
  <div class="row" id="right3" runat="server">
    <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">Title</div>
    <div class="col-xs-7 col-sm-7 col-md-7 col-lg-7">Data</div>
  </div>
</div>

这应该给我类似以下的东西

现在，如果您仔细观察（我知道这很难分辨），但左右两列之间有明显的分隔（代替边框）。

但问题是，当它有效时，我的所有数据行都可以在 left1.visible = false 或 display = none 的调子中不可见，因为它没有附加数据。所以我们得到了一个看起来很奇怪的网格，如下所示。

现在我认为如果一切都向上移动会更好，如下所示

但是我不确定如何为此做边框，所以我想我可以删除左右分区并使用引导列我可以操纵它，所以每个数据行分区都是 6 列大，这样我会如果需要，总是在一行中放置两个。

 <div class="container">
      <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" id="data1" runat="server">
        <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">Title</div>
        <div class="col-xs-7 col-sm-7 col-md-7 col-lg-7">Data</div>
      </div>
      <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" id="data2" runat="server">
        <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">Title</div>
        <div class="col-xs-7 col-sm-7 col-md-7 col-lg-7">Data</div>
      </div>
      <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" id="data3" runat="server">
        <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">Title</div>
        <div class="col-xs-7 col-sm-7 col-md-7 col-lg-7">Data</div>
      </div>
      <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" id="data4" runat="server">
        <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">Title</div>
        <div class="col-xs-7 col-sm-7 col-md-7 col-lg-7">Data</div>
      </div>
      <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" id="data5" runat="server">
        <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">Title</div>
        <div class="col-xs-7 col-sm-7 col-md-7 col-lg-7">Data</div>
      </div>
      <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" id="data6" runat="server">
        <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">Title</div>
        <div class="col-xs-7 col-sm-7 col-md-7 col-lg-7">Data</div>
      </div>
    </div>

使用这个任何行（现在是列）并且丢失都无关紧要，我会得到想要的效果，但是除了一件事我如何边界这个之外，我可以沿着为整个行提供边界的路线（现在是列）但是如果数据元素的数量为奇数，我该如何处理最后一个。另外，这意味着 div 边界的横截面之间的边界将比外部更强，因为您将拥有从左侧、右侧、底部和顶部的边界。

有人知道如何解决这个问题吗？

Answer 1

对于那里的任何人，我设法为我的问题找到了解决方案，并认为如果其他人遇到同样的问题，最好分享它。因此，在研究和玩弄之后，我设法通过 css 通过使用以下元素使边框为 0 来设置大部分分区的样式。

div[class^="col"]

通过这个你可以指定第一列，最后一列偶数。因此，我能够为特定部门打开和关闭边界。

我会说我的解决方案要复杂得多，因为如果数据丢失，让事情向上或横向移动会给用户带来更多问题。我们最终决定按照我们之前的尝试设置左右列，但拥有它以便我们可以平衡左右行。因此，如果我们总共有 8 行，则每行将有 4 行。如果我们有 9 个，那么左边有 5 个，右边有 4 个，依此类推。

我通过添加一个左右重复器来重复我们第一次尝试中的行来做到这一点，并且在代码中有以下内容将数据表一分为二。

 int totalRows = dt.Rows.Count;
 int halfway = (int)Math.Ceiling((float)totalRows / 2);
 LeftDataTable = dt.AsEnumerable().Take(halfway).CopyToDataTable();
 RightDataTable = dt.AsEnumerable().Skip(halfway).Take(totalRows - halfway).CopyToDataTable(); 

使用它，我现在可以将它添加到我们的转发器中，因此无论我们总共要显示多少行，它总是会平衡左右列。