[英]If statement in razor results on 2 columns merging into one
下面我在 Razor 中有一个网格布局。
最后 2 列应该在两个单独的列之间......但似乎 IF 语句导致将两个底部列合并为一个。
我这样做错了吗?
它只使用第二个 col 到最后一个 col,但是当我添加最新的(在底部)时 - 它现在正在合并它们。
在下面,您将看到代码,我附上了它的屏幕截图。
<div class="list-group container" id="JobRequestMonitorTable">
<div class="row list-group-item list-group-item-heading container divTableHeading">
<div class="col-md-4"> Job Code </div>
<div class="col-md-5"> Description </div>
<div class="col-md-2"> Schedule </div>
<div class="col-md-1"> Running </div>
<div class="col-md-1"></div>
</div>
@if (!string.IsNullOrEmpty(ViewBag.ErrorMessage))
{
<div class="row list-group-item-danger">
<div class="col-md-1 text-center">@ViewBag.ErrorMessage</div>
</div>
}
@foreach (var item in Model.JobRequests)
{
<div class="row list-group-item container">
<div class="col-md-4">@item.JobCode</div>
<div class="col-md-5">@item.Description</div>
<div class="col-md-2">@item.Schedule</div>
@if (@item.IsRunning == true)
{
<span class="glyphicon glyphicon-ok"></span>
}
<div class="col-md-1 text-break"></div>
@if (!item.IsRunning)
{
<span class="glyphicon glyphicon-list-alt"></span>
}
<div class="col-md-1"></div>
</div>
}
澄清:我希望这两个列是单独的列:
@if (@item.IsRunning == true)
{
<span class="glyphicon glyphicon-ok"></span>
}
<div class="col-md-1 text-break"></div>
@if (!item.IsRunning)
{
<span class="glyphicon glyphicon-list-alt"></span>
}
<div class="col-md-1"></div>
如果该项目未运行,您可以添加一个空图标:
@if (@item.IsRunning == true)
{
<span class="glyphicon glyphicon-ok"></span>
}
@else
{
<span class="glyphicon"></span>
}
您需要将<span>
标签放在<div>
标签内,这是定义您的列的内容。 您可能还需要将item.Description
列更改为col-md-4
,因为 Bootstrap 最多有 12 列(每个 col 的width: 8.3333%
)。
<div class="col-md-1 text-break">
@if (@item.IsRunning == true)
{
<span class="glyphicon glyphicon-ok"></span>
}
</div>
<div class="col-md-1">
@if (!item.IsRunning)
{
<span class="glyphicon glyphicon-list-alt"></span>
}
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.