在第 1 列的行中显示数据，然后在第 2 列的行中显示数据，依此类推

Question

首先，我找到了这个解决方案 (ColdFusion - Displaying rows as columns)，如果我可以使用 table，它会解决我的问题，但我不能，因为这需要响应。但是，客户不喜欢响应迅速的 table。他们真的，真的更喜欢显示列，这样用户只需要上下滚动，而不是上下左右。

我需要一些帮助将 table 转换为 bootstrap <div>。我知道基础知识：跳过 table、tr 等于 div class="row" 和 td 等于 div class="col-sm-*" 东西。但是，更具体地说，我不确定用于转换上述 SO 解决方案的逻辑以及如何将其应用于我的需要。

将 Lucee 与 Bootstrap v3 一起使用，我正在尝试填充 "grid" 但我需要在填充 column2 之前填充 column1 中的行。

1|10|20|30|40  
2|11|21|31|41  
3|12|22|32|42  
4|13|23|33|43

下面的代码片段来自@travis，我不相信它

<cfset cols = 5>
<!--- get the number of rows so you know what record to display at the top of the next row. for example if our query contains "a,b,c,d,e,f,g,h,i,j,k,l,m" (13 elements) it will produce 3 totalrows--->
<cfset totalRows = ceiling(qMyQuery.RecordCount / cols)>
<!--- set inital record to 1 "output" is the actual cell of the query --->
<cfset output = 1>
<!--- Create table --->
<table width = "100%" border="0" align="center" cellpadding="2" cellspacing = "2">  
<!--- loop through the rows.  This loop will run 3 times in this example --->
    <cfloop from = "1" to = "#totalRows#" index = "thisRow">
    <tr>
        <!--- this loop will run 5 times in times in this example --->
        <cfloop from = "1" to = "#cols#" index = "thisCol">
        <!--- the width in the table cell will dynamicaly calculated to evenly distribute the cells. in this example if cols = 5 100/5 will make the cells 20% of the table --->
        <td width = "<cfoutput>#numberformat((100/cols), 99)#</cfoutput>%" align="center" nowrap style = "border: 1px solid #ccc;">
            <!--- Check current record with the record count, this will be used to display data or an empty cell --->
            <cfif output lte qMyQuery.recordCount>
                <cfoutput>#qMyQuery.Mon[output]#</cfoutput>
            <cfelse>
            <!--- use <br> to display an empty cell --->
                <br>
            </cfif>
            <!--- increment counter to the next record in this example if we started on the first cell of the first row it would be 1(a), then 4(d), then 7(g) and so on if this was the firs cell on the second row it would be 2(b), 5(e), 8(h), continue... --->
            <cfset output = output + totalRows>
        </td>
        </cfloop>
        <!--- this little bit tells where to start the next row. if we just finished the first row output would be 2(b) --->
        <cfset output = thisRow + 1>
    </tr>
    </cfloop>
</table>

这是我尝试使用 bootstrap:

来完成同样的事情

<!-- what I'm working with -->
<cfset cols = 2>
<!-- get the number of rows so you know what record to display at the top of the next row. for example if our query contains "a,b,c,d,e,f,g,h,i,j,k,l,m" (13 elements) it will produce 3 totalrows-->
<cfset totalRows = ceiling(qMyQuery.RecordCount / cols)>
<!--- set inital record to 1 "output" is the actual cell of the query --->
<cfset output = 1>
<!--- Create table --->
<div class="row">
    <div class="col-sm-12">
    <!--- loop through the rows.  This loop will run 3 times in this example --->
        <cfloop from = "1" to = "#totalRows#" index = "thisRow">
            <div class="row">
                <!--- this loop will run 5 times in this example --->
                <cfloop from = "1" to = "#cols#" index = "thisCol">
                    <div class="col-xs-3" style="border:1px solid red">
                        <cfif output lte qMyQuery.recordCount>
                            <cfoutput>#qMyQuery.mon[output]#</cfoutput>
                        <cfelse>
                            <br>
                        </cfif>
                        <cfset output = output + totalRows>
                    </div>
                </cfloop>
                <cfset output = thisRow + 1>
            </div>
        </cfloop>
    </div>
</div>

但是，我的工作输出只是在一个全角页面中显示所有内容（border:1px 纯红色的内联样式可以查看代码生成的内容）。虽然这是针对 ColdFusion 的，但我认为 PHP 的循环逻辑是相同的。

对此有任何提示、技巧、建议或最好的解决方案吗？

Answer 1

我不确定你为什么说你的代码在一个列中输出所有内容。我试过你的例子，它似乎对我有用。您确定您的页面包含了 bootstrap 类吗？

我根据您的示例创建了一个 ColdFusion 要点：https://trycf.com/gist/cec79b0028728c9ec370e3bb8a05991f/lucee5?theme=monokai

我所做的唯一更改是使用您的示例数据创建一个查询对象，并将列数 (cols) 更改为 4，这与 Bootstraps 12 配合得很好网格布局系统。 您需要对 5 列进行一些调整。

当您运行该代码时，它会按照您所说的那样显示单列数据。但那是因为 Bootstrap 类还没有加载。当我将该代码生成的输出复制到 Bootply 时，它会在四列中正确显示：http://www.bootply.com/a0dF7NKw9V

Answer 2

如果我有更多时间，我可能会做不同的事情，因为这不是很漂亮，但它确实满足了要求，我已经在这上面花了太多时间，但最重要的是，客户对此很满意给定预算和时间的方法。

对于此实现，列表永远不会超过 75 条记录，99% 的时间将在平板电脑或更大的设备上使用，并且用户将使用 select 个复选框。还将有一个 "select all" 选项，但未包含在此答案中 - 这是稍后的用户故事。

我运行三个查询（运行一个查询然后一个查询的查询），一个收集第一个XX条记录，第二个XX条记录，XX为第三组记录。我正在为 QoQ 传递一个变量，它将确定将显示多少行，以便每列都会显示一些数据。

然后输出看起来像这样（抱歉，但我永远无法在 SO 中获得完全正确的格式）：

`    <div class="container">
    <div class="row">
        <div class="col-xs-3 col-xs-offset-1">
            <cfoutput query="colum1">
                <label><input type="checkbox"> #id# #mon#</label><br/>
            </cfoutput>
        </div>
        <div class="col-xs-3">
            <cfoutput query="colum2">
                <label><input type="checkbox"> #id# #mon#</label><br/>
            </cfoutput>
        </div>
        <div class="col-xs-3">
            <cfoutput query="colum3">
                <label><input type="checkbox"> #id# #mon#</label><br/>
            </cfoutput>
        </div>
    </div>
</div>`

在第 1 列的行中显示数据，然后在第 2 列的行中显示数据，依此类推

Displaying data in row in column 1, then rows in column 2, etc

coldfusion

twitter-bootstrap

twitter-bootstrap-3

lucee