我有一个页面，我试图根据“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>
预期结果 未按比例缩放
+-------------------------------------+
|+---------------+ +---------------+|
|| | | ||
|| | | ||
|| | +---------------+|
|| | |
|+---------------+ |
|+---------------+ |
|| | |
|| | |
|+---------------+ |
|+---------------+ |
|| | |
|| | |
|+---------------+ |
|+---------------+ |
|| | |
|| | |
|+---------------+ |
|+---------------+ |
|| | |
|| | |
|+---------------+ |
+-------------------------------------+
实际结果 未按比例
+-------------------------------------+
|+---------------+ +---------------+|
|| | | ||
|| | | ||
|| | +---------------+|
|| | +---------------+|
|| | | ||
|| | | ||
|| | +---------------+|
|| | +---------------+|
|| | | ||
|| | | ||
|| | +---------------+|
|| | +---------------+|
|+---------------+ | ||
| | ||
| +---------------+|
| +---------------+|
| | ||
| | ||
| +---------------+|
| |
| |
+-------------------------------------+
最佳答案
将 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>
关于html - 内容不在 2 列页面上的正确列中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26385661/