我有一个页面，我试图根据'ReportItemCategoryID'创建两个单独的内容列。如果！= 8，则进入左栏。如果它== 8，则进入右栏。两列格式化工作正常，但我遇到了一个我无法弄清楚的问题。左列中应包含5个内容（“col1”），右列中应包含1个内容（“col2”）。当foreach循环执行时，它们正确列出div ID（5个具有“col1”，1个具有“col2”）。任何人都可以向我解释为什么第一个foreach循环中出现的4个类别出现在第二列而不是第一列中？
这是HTML
“span6”类声明其内容的宽度。 “pull-left”类将其内容格式化为float left。
<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>
预期结果 不按比例缩放
+-------------------------------------+
|+---------------+ +---------------+|
|| | | ||
|| | | ||
|| | +---------------+|
|| | |
|+---------------+ |
|+---------------+ |
|| | |
|| | |
|+---------------+ |
|+---------------+ |
|| | |
|| | |
|+---------------+ |
|+---------------+ |
|| | |
|| | |
|+---------------+ |
|+---------------+ |
|| | |
|| | |
|+---------------+ |
+-------------------------------------+
实际结果 不按比例缩放
+-------------------------------------+
|+---------------+ +---------------+|
|| | | ||
|| | | ||
|| | +---------------+|
|| | +---------------+|
|| | | ||
|| | | ||
|| | +---------------+|
|| | +---------------+|
|| | | ||
|| | | ||
|| | +---------------+|
|| | +---------------+|
|+---------------+ | ||
| | ||
| +---------------+|
| +---------------+|
| | ||
| | ||
| +---------------+|
| |
| |
+-------------------------------------+
答案 0 :(得分：0)
将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>