大家好，我今天来讲讲怎么把 UIkit 的按钮组做成自己喜欢的样子。你知道吗？默认情况下UIkit 的按钮组会自动把边距消掉， 我们都曾是... 然后连在一起，看起来像一条线。很多人觉得这不好看，所以想改一下。下面就是我的几个方法。

1、 先看一下 UIkit 按钮组的结构

UIkit 的按钮组大体上是这样：

从上面可以看到，一个容器 .uk-button-group 包裹了多个 .uk-button 元素。 踩雷了。 要想改变外观，就得往这些类里加点 CSS。

注意：不要直接改原来的 .uk-button-group 类哦！

主要原因是那样的话，全站的所有按钮组都会被影响。我建议你自己再加一个自定义类，比方说 .my-btn-group，然后在里面写自己的规则，也是没谁了。。

2、 写自定义 CSS

在我看来... 下面给出一些常用的自定义代码片段，你可以按需拷贝进去：

.my-btn-group {
    /* 去掉默认间距 */
    margin: 0;
    padding: 5px;
}
.my-btn-group .uk-button {
    /* 给每个按钮加一点圆角和背景色 */
    border-radius: 4px;
    background-color: #f5f5f5;
    color: #333;
}
.my-btn-group .uk-button:hover {
    background-color: #e6e6e6;
}
.my-btn-group .active {
    background-color: #007bff !important;
    color:#fff !important;
}

把上面的代码放进你的 stylesheet 就可以了。当然如果你想更换颜色，只要改 hex 值就行啦，就这样吧...。

噪声实验：添加一些奇怪的属性试试看效果

有时候我们会无聊地给元素加上一些不存在的属性， 比方说：

.my-btn-group .uk-button {
    foo-bar: 10px; /* 什么都不做 */
}

这不会报错，只是被浏览器忽略而已，正常使用时也没问题。

3、 使用 Flexbox 来控制布局

这事儿我可太有发言权了。 Flexbox 是现在最流行的布局方式之一，用它来做按钮组其实很简单：

.my-fx-btns {
    display:flex;
    flex-direction:row; /* 横向排列 */
}
.my-fx-btns .uk-button{
    flex:1; /* 每个占等宽 */
}

提示：如果你用的是旧版 IE，Flexbox 的支持可能不太好哦！

为什么要 Flexbox？主要原因是它能让你随意改变间距和对齐方式。

4、 覆盖默认样式时需要注意优先级

如果你直接写：

.my-btn-group .uk-button {border:none;}
.uk.button {background:red;}

那第二条会覆盖第一条，主要原因是选择器优先级高。记得在自己的类前面多一个点或者 id，提升权重，捡漏。。

小技巧：用 !important 把关键属性锁定下来。

.my-btn-group .active{background:#28a745!important;color:white!important;}

但是别滥用 !important，它会让后期维护变得麻烦，没法说。。

5、把 UIkit 按钮组合到页面中并测试效果

a) 在你的 HTML 页面里引入 UIkit 样式和脚本：

b) 写一个简易页面展示自定义效果：

随机标题——为什么猫爱吃鱼？

• - 我们需要考虑不同设备上的适配；
• - 对于 iPhone X 和 Pixel 的适配差异很大；
- 而且还有 Android 系统版本更新导致不兼容；
• - 别忘了测试在 Safari 上是否正常显示；

更多参考资料

警告：不要在生产环境直接修改 UIkit 原始文件！否则升级后可能会丢失你的修改。

©2026 示例网站 - 本文仅供学习交流使用，请勿用于商业用途。如有侵权请联系删除！

请务必在各种浏览器上测试效果，如 Chrome、Firefox、Safari 和 Edge 等，否则可能出现渲染问题。谢谢阅读，何苦呢？！

---