使用 Bootstrap 格式化 WebGrid 未按预期显示颜色答案

【问题标题】：Formatting WebGrid with Bootstrap not display colors as expected使用 Bootstrap 格式化 WebGrid 未按预期显示颜色
【发布时间】：2016-09-20 11:22:49
【问题描述】：

我正在使用 MVC WebGrid，并尝试使用 Bootstrap 样式对其进行格式化。但是，我使用的编辑按钮没有像我期望的那样格式化。我正在使用 Bootswath 的 Cerulean 主题。我将按钮设置为“警告”样式，并且我得到橙色背景以及按钮的圆形边缘，但按钮内的文本是蓝色而不是我期望的白色。我是否以错误的方式将 Bootstrap 与网格一起使用？

这是我的网格。我刚刚设置为蔚蓝的“信息”的标题样式。

@grid.GetHtml(tableStyle: "table table-bordered table-striped table-hover",
headerStyle: "info",

mode: WebGridPagerModes.All,
firstText: "<< First",
previousText: "< Prev",
nextText: "Next >",
lastText: "Last >>",

columns: grid.Columns(
    grid.Column(columnName: "CallDate", header: "Call Day", format: (item) => string.Format("{0:ddd}", item.CallDate)),
    grid.Column(columnName: "CallDate", header: "Call Date", format: (item) => string.Format("{0:d}", item.CallDate)),
    grid.Column(columnName: "CustomerName", header: "Customer Name"),
    grid.Column(columnName: "Subject", header: "Subject"),
    grid.Column(columnName: "PhoneNumber", header: "Phone Number"),
    grid.Column(columnName: "CallTypeName", header: "Call Type"),
    grid.Column(columnName: "StatusName", header: "Status"),
    grid.Column(header: "Edit", format: (item) =>
    {
        var link = Html.ActionLink("Edit", "Edit", new { id = item.Id });
        return link;
    }, style: "btn btn-warning btn-md")
    ))

这是我的 Site.css。

body {
    padding-top: 50px;
    padding-bottom: 20px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

/* Offsets for vertical spacing */
.voffset  { margin-top: 2px; }
.voffset1 { margin-top: 5px; }
.voffset2 { margin-top: 10px; }
.voffset3 { margin-top: 15px; }
.voffset4 { margin-top: 30px; }
.voffset5 { margin-top: 40px; }
.voffset6 { margin-top: 60px; }
.voffset7 { margin-top: 80px; }
.voffset8 { margin-top: 100px; }
.voffset9 { margin-top: 150px; }

【问题讨论】：

是否有其他 CSS 影响锚标签中的文本？
我不确定。我对调试工具不是很好，但是当我在 Chrome 中使用 F12 并单击元素时，它看起来好像正在对其应用 Bootstrap。希望我可以发布屏幕截图，但是有很多样式被划掉了。但是我确实找到了名为 .btn-warning 的样式，它的颜色为：#ffffff 和背景颜色：#dd5600。这是我所期望的白色和橙色。我找不到任何显示颜色的东西：设置为某种蓝色。在左侧的主要元素部分，它有 class="btn btn-warning btn-md"。
我发现了另一个看起来很奇怪的东西。即使我将 WebGrid 的 tablestyle 设置为“table table-bordered”，Edit 列上的边框也丢失了。这几乎就像 CSS 的应用方式不同，因为 HTML.ActionLink.

标签： css twitter-bootstrap webgrid

【解决方案1】：

我最终找到了解决办法。我在想这可能与我正在使用的 ActionLink（我在一个例子中找到）有关。这是我发现最终起作用的结果。编辑是我的控制器调用“网格”的 ActionResult。

grid.Column(header: "Action", format:@<text> <a href="@Url.Action("Edit", "Grid", new { id = item.Id })" class="btn btn-primary btn-sm">Edit</a></text>)

希望这对其他人有所帮助。

【讨论】：