显示每行三列在MVC CSHTML [英] Display three columns per row in MVC cshtml

问题描述

我已经是目前低于其正常工作，但现在它显示了一个长长的清单我的记录，我想要做的是显示每行三（3）记录。我试图把一个for循环在标签，但它不工作，它只是显示的每个记录重复三（3）时间。

What I have currently is the below which works fine but now it shows my records in a long list, what i want to do is show three(3) records per row. I tried putting a for loop over the tags but it doesnt work it just displays duplicate of each record three(3) time.

   @foreach (var ClientItem in Model.Clients)
                    {
                      <tr>
                        <td>
                            <div id="dataListItem" >
                                @Html.Hidden("ClientID", ClientItem.ClientID)
                                @Html.Label(ClientItem.ClientName)
                                <input type='checkbox' name="ClientItemCheckBox" id="ClientItemCheckBox" style="color: #428bca;" />
                            </div>
                        </td>
                     </tr>
                    }

请帮我跑出去的想法，我也试着归档的这是问过

推荐答案

通过引导响应网格，这是没有必要通过行手工创建一个表，并循环。引导将自动换行的列给你的。举使用12列的网格系统上工作，而如果超过12列被放置在一行中，每个组额外的列会，作为一个单元，换到一个新行。

Using Bootstrap Responsive grids, it is not necessary to manually build a table and loop through the rows. Bootstrap will automatically wrap columns for you. Bootstrap works on a grid system using 12 columns, and if more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

<div class="row">
    <div id="dataListItem" class="col-md-4">
        @Html.Hidden("ClientID", ClientItem.ClientID)
        @Html.Label(ClientItem.ClientName)
        <input type='checkbox' name="ClientItemCheckBox" 
                    id="ClientItemCheckBox" style="color: #428bca;" />
    </div>
</div>

这里是 Bootply

这篇关于显示每行三列在MVC CSHTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！