Bootstrap 按钮组颜色答案

【问题标题】：Bootstrap button group colourBootstrap 按钮组颜色
【发布时间】：2016-12-25 15:09:36
【问题描述】：

有没有办法在 btn-group 级别设置按钮组中所有按钮的颜色？

例如，我将 10 个按钮分组，我希望它们都为绿色（btn-success）

目前，我必须为每个单独的按钮设置样式。我可以通过在按钮组 div 上设置 btn-group-xs 来设置所有按钮的大小，但它不适用于颜色。

理想情况下，我不想设置组中每个按钮的样式，而是希望在组 div 上设置样式，以便其中的所有按钮都接收该样式 - 特别是它只是我的 btn 成功希望它们都是绿色的。

bootstrap 中是否有我遗漏的东西，或者我必须做一些自定义 CSS？

谢谢

【问题讨论】：

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

在没有引导程序的情况下工作 jsfiddle。使用引导程序工作 jsfiddle。

.btn-group button{
    background-color:green;
}

【讨论】：

这并没有解决 Bootstrap 范围内的答案。
但是你是否使用引导程序并不重要。您仍然可以使用其父元素捕获所有按钮。 jsfiddle.net/pu62oq3m/3 这没有引导程序，所以在你投票之前检查一下
没错，但还有更多需要考虑。例如，如果我设置了该样式，那么您是正确的，按钮背景颜色将为绿色，但按钮仍将以默认方式运行 - 例如，悬停会将背景颜色更改为浅灰色，文本按钮上会保持黑色，难以阅读等。可行，但对于引导程序和我想要实现的简单性来说太繁琐了

【解决方案2】：

没有像.btn-group-primary 这样的预定义类。在 Bootstrap（当前）中解决此问题的唯一方法是根据需要将颜色应用于 .btn。

话虽如此，你可以用 jQuery 做一些简单的事情（因为我们已经在使用 Bootstrap）来更自动地应用东西：

$('.btn-group-primary .btn').addClass('btn-primary');

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="btn-group btn-group-primary" role="group" aria-label="...">
  <button type="button" class="btn">Left</button>
  <button type="button" class="btn">Middle</button>
  <button type="button" class="btn">Right</button>
</div>

【讨论】：

这更像是我认为我必须去的地方，干杯。我的一小部分希望可能有一些我错过的东西。检查 v4 文档，它看起来保持不变......耻辱