Kendo MVC Grid编辑与删除命令图标容器过宽问题求助

当然可行！我之前做项目时也碰到过这个情况——Kendo Grid默认的命令按钮容器确实自带不少多余的内边距和宽度，咱们完全可以通过简单的CSS调整或者小改配置来精简空间，同时保留图标功能。

下面给你两种实用的解决方法：

方法1：直接用CSS压缩冗余空间 #

这是最直接的方式，通过覆盖Kendo默认的样式来缩小容器和按钮的尺寸：

/* 调整整个命令列的宽度（按需设置，比默认的86px更小） */
.k-grid .k-command-column {
    width: 60px !important;
}

/* 压缩编辑/删除按钮的内边距和外边距 */
.k-grid .k-grid-edit, .k-grid .k-grid-delete {
    padding: 4px 6px !important;
    margin: 0 2px !important;
    min-width: auto !important; /* 去掉按钮默认的最小宽度限制 */
}

/* 确保图标本身没有多余间距 */
.k-grid .k-grid-edit .k-icon, .k-grid .k-grid-delete .k-icon {
    margin: 0;
}

如果你的Kendo版本不同，类名可能略有差异（比如有些版本是.k-grid-edit-command），可以用浏览器的开发者工具（F12）查看按钮元素的实际类名，再调整CSS选择器。

方法2：结合MVC配置+自定义CSS #

你也可以在配置命令按钮时添加自定义类，再针对性设置样式，这样更灵活：

MVC代码调整： #

columns.Command(command => {
    command.Edit().Text(" ").HtmlAttributes(new { @class = "compact-command-btn" });
    command.Destroy().Text(" ").HtmlAttributes(new { @class = "compact-command-btn" });
}).Width(60); /* 先把列宽设小 */

对应的CSS： #

.compact-command-btn {
    padding: 3px 5px !important;
    min-width: 24px !important; /* 按图标大小设置最小宽度 */
    line-height: 1; /* 避免按钮高度被行高撑大 */
}

注意事项 #

• 调整宽度时别太小，要保证图标能完整显示，尤其是在不同屏幕尺寸下；
• 测试时留意按钮的点击区域，确保压缩后点击区域依然足够，不会影响用户操作；
• 如果用了Kendo的主题，有些主题的默认样式可能需要更高优先级的CSS（比如加!important）来覆盖。

内容的提问来源于stack exchange，提问作者Randy Minder