Если оператор в бритве приводит к объединению двух столбцов в один - PullRequest
Новая
       13

Если оператор в бритве приводит к объединению двух столбцов в один

0 голосов
/ 10 февраля 2020

Ниже у меня есть макет сетки в Razor.

Последние 2 столбца должны быть между двумя отдельными столбцами ... но похоже, что оператор IF приводит к объединению обоих столбцов в одном.

Я что-то не так делаю?

Он работал только со второго столбца до последнего столбца, но когда я добавил последний (внизу) - он объединяет их сейчас.

Здесь ниже вы увидите код, и я прикрепил снимок экрана, на котором он выглядит. 

<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>
}

enter image description here

Чтобы уточнить: я хочу, чтобы эти два столбца были РАЗДЕЛЬНЫМИ: 

           @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>

Ответы [ 2 ]

0 голосов
/ 10 февраля 2020

Вам нужно поместить теги <span> в теги <div>, что и определяет ваши столбцы. Вам также, вероятно, потребуется изменить столбец item.Description на col-md-4, так как Bootstrap имеет максимум 12 столбцов в поперечнике (каждый столбец 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>
0 голосов
/ 10 февраля 2020

Вы можете добавить пустой значок, если элемент не запущен: 

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