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。所以我想做以下事情：如果 data 为空，则显示 other data 和 width = 100%。澄清一下，我想做这样的事情：

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

反之亦然。

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

Answer 1

本质上，您只想在 @Model.Data 不是 null 时有条件地显示它。您还可以使用变量设置 col class，并根据 @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>

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

html merge 2 columns in 1 with 100% width bootstrap 2

html

css

twitter-bootstrap-2