如果 razor 中的語句導致 2 列合並為一列

Question

下面我在 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>

Answer 1

如果該項目未運行，您可以添加一個空圖標：

@if (@item.IsRunning == true)
{
    <span class="glyphicon glyphicon-ok"></span>
}
@else
{
    <span class="glyphicon"></span>
}

Answer 2

您需要將<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>