c# - MVC 生成的 Bootstrap 表没有响应

Question

我有一些 Bootstrap 表是根据用户选择的标准构建的，它们完全没有响应。即使在 chrome 开发工具中更改 css(如宽度)也不会在创建后做出可见的更改。我有另一个几乎相同的工作表 - 不同之处在于工作表是根据静态标准生成的。应用于页面和元素的 CSS 是相同的。如果我将静态表放在另一个 View 中，它会正确显示。

这些在父页面中定义的容器中。

我对 MVC 没有什么经验。我正在一个新元素中从事 UI 工作，对 View 之外的知识知之甚少。

一个无响应 View (pic) :

@model ACHRE.Web.ViewModels.ApplicationLogViewModel
/*Inputs for date range to use as search critera*/
@using (Html.BeginForm("Search", "ApplicationLog", FormMethod.Post, new { @class = "disableOnClickForm" }))
{
    <div class="form-horizontal">
        <div class="form-group">
            <div class="col-md-12 form-inline">
                @Html.LabelFor(model => model.StartDate) @Html.TextBoxFor(model => model.StartDate, new { @class = "form-control DateInput", @style = "width: 250px;", @readonly = "readonly" }) &nbsp;
                @Html.LabelFor(model => model.EndDate) @Html.TextBoxFor(model => model.EndDate, new { @class = "form-control DateInput", @style = "width: 250px;", @readonly = "readonly" }) &nbsp;
                @Html.LabelFor(model => model.ExcludeDebug) @Html.CheckBoxFor(model => model.ExcludeDebug, new { @class = "form-control" }) &nbsp;
                <input type="submit" value="Search" class="btn button button-secondary disableOnClickSubmit" />
            </div>
        </div>
        @Html.ValidationSummary(false, "", new { @class = "text-danger" })
    </div>
}

@if (Model != null && Model.Logs != null && Model.Logs.Count() > 0)
{
    /*Create bootstrap table*/
    <div class="table-responsive">
        <table class="table">
            <thead>
                <tr>
                    <th>@Html.DisplayNameFor(model => model.Logs.FirstOrDefault().LogDate)</th>
                    <th>@Html.DisplayNameFor(model => model.Logs.FirstOrDefault().ApplicationLogTypeName)</th>
                    <th>@Html.DisplayNameFor(model => model.Logs.FirstOrDefault().Data)</th>
                    <th>&nbsp;</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model.Logs)
                {
                    <tr>
                        <td>@Html.DisplayFor(modelItem => item.LogDate)</td>
                        <td>@Html.DisplayFor(modelItem => item.ApplicationLogTypeName)</td>
                        <td>@Html.DisplayFor(modelItem => item.Data)</td>
                        <td>@Html.ActionLink("Details", "Details", new { id = item.Id.Value })</td>
                    </tr>
                }
            </tbody>

        </table>
    </div>
}
else if (Model != null && Model.HasSearched == true)
{
    <h3>No results were returned for the search.</h3>
}

工作 View (pic) :

@model IEnumerable<ACHRE.Core.Interfaces.Domains.ITransactionCode>

    <table class="table">
        <thead>
            <tr>
                <th>
                    @Html.DisplayName("Transaction Code Number")
                </th>
                <th>
                    @Html.DisplayName("Transaction Code Name")
                </th>
                <th>
                    @Html.DisplayName("Description")
                </th>
                <th>
                    @Html.DisplayName("Active")
                </th>
                <th>
                    @Html.DisplayName("Actions")
                </th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.Number)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Name)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Description)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.IsActive)
                    </td>
                    <td>
                        @Html.ActionLink("Edit", "Edit", new { id = item.Id })
                    </td>
                </tr>
            }
        </tbody>
    </table>

感谢您的帮助:)

Answer 1

您的 HTML 和 CSS 看起来不错。在单元格周围放置彩色边框以查看您的值是否太长，尤其是在“数据”列中，它看起来可能会占用所有空间。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
   td, th {
      border: 1px solid red;
   }
</style>

<div class="table-responsive">
    <table class="table">
        <thead>
            <tr>
                <th>Log Date</th>
                <th>Log Type</th>
                <th>Data</th>
                <th>&nbsp;</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
            <tr>
                <td>2</td>
                <td>2</td>
                <td>2</td>
                <td>2</td>
            </tr>
        </tbody>
    </table>
</div>