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

Question

我正在使用 MVC WebGrid，我正在尝试使用 Bootstrap 样式对其进行格式化。但是，我使用的“编辑”按钮的格式与我预期的不同。我正在使用 Bootswath 的 Cerulean 主题。我将按钮设置为 "warning" 样式，我得到了橙色背景和按钮的圆边，但按钮内的文本是蓝色而不是我期望的白色。我是否以错误的方式将 Bootstrap 与网格一起使用？

这是我的网格。 header 样式我刚刚设置为 Cerulean 的 "Info"。

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

Answer 1

我最终找到了解决方法。我在想这可能与我使用的 ActionLink 有关（我在一个示例中找到了它）。这是我发现最终起作用的东西。编辑是我的控制器调用的 ActionResult "Grid".

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

希望这对其他人有帮助。

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

Formatting WebGrid with Bootstrap not display colors as expected

css

webgrid

twitter-bootstrap