Question

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

这是我的网格。标题样式我刚刚设置为Cerulean＆＃34; Info＆＃34;。

@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有关（我在一个例子中找到了）。这是我发现最终工作的东西。编辑是我的控制器calle“Grid”的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>)

希望这有助于其他人。

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

1 个答案: