html 将 2 列合并为 1，宽度为 100% bootstrap 2

Question

我的 .NET MVC 元素中有以下 HTML 标记:

<div class="row">
    <div class="span6">@Model.Data</div>
    <div class="span6">@Model.OtherData</div>
</div>

我正在从服务器获取数据。所以我想做以下事情:如果 data 为空，则显示 other data with width = 100%。只是为了澄清我想做这样的事情:

<div class="row">
    <div class="span12">@Model.OtherData</div>
</div>

反之亦然。

有办法吗？也许使用不同的 HTML 标签/CSS 类。

Answer 1

本质上，您只想有条件地显示 @Model.Data，仅当它不是 null 时。您还可以使用变量设置 col 类，并根据 @Model.Data 是否存在有条件地更改该变量。尝试这样的事情:

@ {
    var colClass = 'span6';

    if (@Model.Data == null) {
      colClass = 'span12';
    }
}

<div class="row">
    @if (@Model.Data != null) {
        <div class="@colClass">@Model.Data</div>
    }
    <div class="@colClass">@Model.OtherData</div>
</div>