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

首先，我找到了这个解决方案（），如果我可以使用

表

，它可以解决我的问题，但我不能，因为这需要响应。但是，客户不喜欢响应表。他们真的，真的更喜欢显示列，这样用户只需要上下滚动，而不需要上下左右滚动

我需要一些帮助将表转换为引导

。我知道基本知识：跳过表格，

tr

equals

divclass=“row”

和

td

equals

divclass=“col sm-*”

stuff。但是，更具体地说，我不确定用于转换上述SO解决方案的逻辑以及如何将其应用于我的需要

使用Lucee和Bootstrap v3，我试图填充一个“网格”，但在填充column2之前，我需要填充column1中的行

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

下面的代码片段来自@travis，我对此不负责

#qMyQuery.Mon[输出]#

这是我尝试使用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>

#qMyQuery.mon[输出]#

但是，我的工作的输出只是在一个全宽页面中显示所有内容（边框的内联样式：1px实心红色用于查看代码生成的内容）。虽然这是针对ColdFusion的，但我认为循环的逻辑与PHP相同

---

有什么提示、诀窍、建议或更好的解决方案吗？

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

我根据您的示例创建了一个ColdFusion要点：

我所做的唯一更改是使用示例数据创建一个查询对象，并将列数（

cols

）更改为

4

，这与引导12网格布局系统很好地配合。您需要对

5

列进行一些调整

当您运行该代码时，它会显示您所说的单个数据列。但这是因为引导类尚未加载。当我将该代码生成的输出复制到Bootply中时，它将正确地显示在四列中：

---

如果我有更多的时间，我可能会采取不同的做法，因为这并不漂亮，但它确实满足了要求，而且我已经在这方面花费了太多时间，但最重要的是，考虑到预算和时间，客户对这种方法很满意

对于此实现，列表将永远不会超过75条记录，99%的时间将用于平板电脑或更大的设备，并且将由用户用于选择复选框。还有一个“全选”选项，但这个答案中没有包含这个选项——这是稍后的用户故事

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

然后输出如下所示（很抱歉，我无法在SO中正确设置格式）：

`
#id##mon#

#id##mon#

#id##mon#

`

Bootstrap3.x的网格系统以12为基数。上述代码中的注释是否正确；“循环将运行5次”，这将创建5个col-sx-3 div，总计15个。另一个潜在的问题是col-sx-3（在循环中）可能是一个输入错误。标准网格类是X列、sm列、md列和lg列。当然，col-sx-3可以是一个用户定义的类…所以在我修复一些缩进和其他东西之前，我不会让我发布代码，我忘记了它是什么。我熟悉网格（喜欢它）。sx是一个输入错误，我会在代码中修复它。至于列数，当前设置为2需要根据用于查看页面的设备进行动态设置。我把它留在代码中是为了帮助解释变量和值的位置，但事后看来，我认为这可能会增加混乱。我曾想过做一些快速的数学计算，以得到返回的记录数（应该远低于100）然后除以我需要的列数，然后对每列数据执行查询。我不喜欢

然后

然后

行模式。Bootstrap真的不能那样工作。@JamesAMohler你确定吗？提供了一个嵌套示例-或者这不是您的意思？如果没有，你能详细说明一下吗？首先，谢谢你的努力。我发布的代码确实有效，但为了让我的代码发挥作用，A）你必须硬编码列数B）如果浏览器调整大小，列不会堆叠，C）列表不会是数字，它将是不同文本长度的文本，并带有一个复选框。嗯。在桌面上，我们可以有4列，平板电脑，3列，在较小的设备上有一列（这就是为什么我不能提前硬编码

col

变量的原因。这就是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>

`    <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>`