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

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

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

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

来源

2016-05-23 Caverman

是否有可能有一些其他CSS影响锚标记中的文本？ – BSMP

我不确定。我并不擅长调试工具，但是当我在Chrome中使用F12并单击该元素时，它看起来就像是在应用Bootstrap。希望我可以发布一个屏幕截图，但有一些样式被划掉。但是我确实找到了叫做.btn-warning的样式，它的颜色为#ffffff，背景颜色为＃dd5600。这是我所期望的白色和橙色。我找不到任何显示颜色的东西：设置为某种蓝色。在左边的主元素部分，它有class =“btn btn-warning btn-md”。 – Caverman

我发现另一件看起来很奇怪的东西。即使我认为WebGrid的tablestyle设置为“table table-bordered”，编辑列上的边框仍然缺失。这几乎就像CSS得到不同的应用，因为HTML.ActionLink。 – Caverman

我最终找到了一个修复程序。我认为这可能与我使用的ActionLink有关（我在一个例子中已经找到）。这是我发现的最终工作。 Edit是我的控制器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>)

希望这可以帮助别人。

来源

2016-05-23 18:32:16 Caverman

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

回答

相关问题