html - 内容不在 2 列页面上的正确列中

Question

我有一个页面，我试图根据“ReportItemCategoryID”创建两个单独的内容列。如果 != 8，它会出现在左栏中。如果它 == 8，它会出现在右栏中。两列格式有效，但我遇到了一个我无法弄清楚的问题。左栏(“col1”)中应有 5 条内容，右栏中应有 1 条内容(“col2”)。当 foreach 循环执行时，它们会正确列出 div ID(5 个有“col1”，1 个有“col2”)。谁能向我解释为什么通过第一个 foreach 循环的类别中有 4 个出现在第二列而不是第一列？

这是 HTML

“span6”类声明其内容的宽度。 “向左拉”类将其内容格式化为向左浮动。

 <div class="row-fluid">
        @foreach (var group in Model.Where(i => i.Active && i.ReportItemCategory.Active && i.Visible && i.ReportItemCategoryID!=8).GroupBy(i => i.ReportItemCategoryID).OrderBy(i => i.FirstOrDefault().ReportItemCategory.Name))
{
        <div id="col1" class="span6 pull-left">
            <ul class="nav nav-list">
                <li class="nav-header">
                    <div class="input-append">

                        <div rel="tooltip" title="@group.First().ReportItemCategory.Description">
                            <img src="@Url.Content("~/img/folder-horizontal.png")" alt="Folder" style="margin-bottom:-3px;"/>
                            <span>@group.FirstOrDefault().ReportItemCategory.Name</span>
                        </div>

                        <ul class="nav nav-list">
                            @foreach (var item in group.OrderBy(i => i.Name))
                            {
                                <li>
                                    <div class="input-append" rel="tooltip" title="@item.Description">
                                        <img src="@Url.Content("~/img/chart.png")" alt="Report" style="margin-bottom:-3px;"/>
                                        <a href="#" onclick="javascript:newPopup('@Url.Action("ViewReport", "Reporting", new { id = item.ReportItemID })');return false;">@item.Name</a>
                                    </div>
                                </li>
                            }
                        </ul>
                    </div>
                </li>
            </ul>
        </div>

}
@foreach (var group in Model.Where(i => i.Active && i.ReportItemCategory.Active && i.Visible && i.ReportItemCategoryID==8).GroupBy(i => i.ReportItemCategoryID).OrderBy(i => i.FirstOrDefault().ReportItemCategory.Name))
{
        <div id="col2" class="span6 pull-left">
            <ul class="nav nav-list">
                <li class="nav-header">
                    <div class="input-append">

                        <div rel="tooltip" title="@group.First().ReportItemCategory.Description">
                            <img src="@Url.Content("~/img/folder-horizontal.png")" alt="Folder" style="margin-bottom:-3px;"/>
                            <span>@group.FirstOrDefault().ReportItemCategory.Name</span>
                        </div>

                        <ul class="nav nav-list">
                            @foreach (var item in group.OrderBy(i => i.Name))
                            {
                                <li>
                                    <div class="input-append" rel="tooltip" title="@item.Description">
                                        <img src="@Url.Content("~/img/chart.png")" alt="Report" style="margin-bottom:-3px;"/>
                                        <a href="#" onclick="javascript:newPopup('@Url.Action("ViewReport", "Reporting", new { id = item.ReportItemID })');return false;">@item.Name</a>
                                    </div>
                                </li>
                            }
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
}
</div>

预期结果 未按比例缩放

+-------------------------------------+
|+---------------+   +---------------+|
||               |   |               ||
||               |   |               ||
||               |   +---------------+|
||               |                    |
|+---------------+                    |
|+---------------+                    |
||               |                    |
||               |                    |
|+---------------+                    |
|+---------------+                    |
||               |                    |
||               |                    |
|+---------------+                    |
|+---------------+                    |
||               |                    |
||               |                    |
|+---------------+                    |
|+---------------+                    |
||               |                    |
||               |                    |
|+---------------+                    |
+-------------------------------------+

实际结果 未按比例

+-------------------------------------+
|+---------------+   +---------------+|
||               |   |               ||
||               |   |               ||
||               |   +---------------+|
||               |   +---------------+|
||               |   |               ||
||               |   |               ||
||               |   +---------------+|
||               |   +---------------+|
||               |   |               ||
||               |   |               ||
||               |   +---------------+|
||               |   +---------------+|
|+---------------+   |               ||
|                    |               ||
|                    +---------------+|
|                    +---------------+|
|                    |               ||
|                    |               ||
|                    +---------------+|
|                                     |
|                                     |
+-------------------------------------+

Answer 1

将 col1 和 col2 div 移到 foreach 循环之外。这确保每个 foreach 循环都在其各自的 div 中运行。我发布这个答案以防其他人遇到同样的问题。

<div class="row-fluid">
 <div id="col1" class="span6 pull-left">
 @foreach (var group in Model.Where(i => i.Active && i.ReportItemCategory.Active && i.Visible && i.ReportItemCategoryID!=8).GroupBy(i => i.ReportItemCategoryID).OrderBy(i => i.FirstOrDefault().ReportItemCategory.Name))
{

            <ul class="nav nav-list">
                <li class="nav-header">
                    <div class="input-append">

                        <div rel="tooltip" title="@group.First().ReportItemCategory.Description">
                            <img src="@Url.Content("~/img/folder-horizontal.png")" alt="Folder" style="margin-bottom:-3px;"/>
                            <span>@group.FirstOrDefault().ReportItemCategory.Name</span>
                        </div>

                        <ul class="nav nav-list">
                            @foreach (var item in group.OrderBy(i => i.Name))
                            {
                                <li>
                                    <div class="input-append" rel="tooltip" title="@item.Description">
                                        <img src="@Url.Content("~/img/chart.png")" alt="Report" style="margin-bottom:-3px;"/>
                                        <a href="#" onclick="javascript:newPopup('@Url.Action("ViewReport", "Reporting", new { id = item.ReportItemID })');return false;">@item.Name</a>
                                    </div>
                                </li>
                            }
                        </ul>
                    </div>
                </li>
            </ul>


} 
</div>
<div id="col2" class="span6 pull-left">
@foreach (var group in Model.Where(i => i.Active && i.ReportItemCategory.Active && i.Visible && i.ReportItemCategoryID==8).GroupBy(i => i.ReportItemCategoryID).OrderBy(i => i.FirstOrDefault().ReportItemCategory.Name))
{

            <ul class="nav nav-list">
                <li class="nav-header">
                    <div class="input-append">

                        <div rel="tooltip" title="@group.First().ReportItemCategory.Description">
                            <img src="@Url.Content("~/img/folder-horizontal.png")" alt="Folder" style="margin-bottom:-3px;"/>
                            <span>@group.FirstOrDefault().ReportItemCategory.Name</span>
                        </div>

                        <ul class="nav nav-list">
                            @foreach (var item in group.OrderBy(i => i.Name))
                            {
                                <li>
                                    <div class="input-append" rel="tooltip" title="@item.Description">
                                        <img src="@Url.Content("~/img/chart.png")" alt="Report" style="margin-bottom:-3px;"/>
                                        <a href="#" onclick="javascript:newPopup('@Url.Action("ViewReport", "Reporting", new { id = item.ReportItemID })');return false;">@item.Name</a>
                                    </div>
                                </li>
                            }
                        </ul>
                    </div>
                </li>
            </ul>

}
</div>
</div>