Twitter bootstrap 正在扩展引导程序3。btn组不工作

最终，我试图用更少的时间完成以下风格

<div class="filter btn-group">
    <button class="btn btn-default" type="button" data-filter="*">show all</button>
    <button class="btn btn-default" type="button" data-filter=".cd">CD</button>
    <button class="btn btn-default" type="button" data-filter=".vinyl">Vinyl</button>    
</div>

---

将.btn和.btn默认值添加到按钮时，效果很好。但是将.btn组添加到包装器“.filter”不起作用。我不知道我做错了什么。如果我手动将class.btn组添加到class=“filter btn group”中，它会起作用。

已编辑

class="filter btn-group" 虽然我想不出一个方法来完全实现你想要的，但在@seven phases max的帮助和启发下，我能够调整要点以获得你想要的结果

要了解它的工作原理，“步骤”包括：首先，将按钮选择器视为.btn.btn-default。其次，找到.btn组选择器的所有实例，并将其替换为.filter。最后，在.filter中找到.btn的所有实例，并用按钮替换它们

您可以通过extend（在更少的v1.4.0+版本中提供）来实现这一点。以下是less文件的一个简单示例：

@import "bootstrap.less";
button {
    .btn-default();
    &:extend(.btn, .btn.btn-default all);
}
.filter:extend(.btn-group all) {}
.filter > button:extend(.btn-group > .btn all) {}
.filter button + button:extend(.btn-group .btn + .btn all) {}

您需要确保任何扩展都放在其他导入之后，因为扩展的行为类似于（非破坏性的）搜索和替换。例如，上面的第一个扩展在任何规则选择器中查找.btn的所有实例，并复制该选择器的副本，将.btn替换为button

结果输出允许将以下内容设置为btn组的样式：

<div class="filter">
  <button type="button">BUTTON ONLY</button>
  <button type="button">BUTTON ONLY</button>
  <button type="button">BUTTON ONLY</button>
</div>

仅按钮
仅按钮
仅按钮

注意事项

正如seven phases max在几条评论中指出的，这将为您的输出增加相当多的权重，因为这是一种非破坏性的搜索和替换。它为未统一/未压缩的输出增加约9Kb

由于BUTTON.js中的BUTTON data-API专门查找class.btn而不是BUTTON元素，因此不能使用此类型的扩展标签来扩展带有

data toggle=“buttons”

属性的复选框或单选按钮

---

你看到生成的css了吗？这看起来像什么？它缺少一些CSS，例如.btn group>.btn:first child:not（：last child）：not（.dropdown toggle）{边框右下半径：0；边框右上半径：0}简而言之，它不应该按照您可能期望的方式工作。请注意，

.btn group

、

.btn

和

.btn default

只是简单的CSS类，不打算用作mixin（即使更少的类允许您这样做）。您可以在自己的类中获得这些特定CSS类的属性副本，但无法获得包含

.btn group

、

.btn

等选择器的其他引导类的属性。Bootstrap的

.btn group>.btn

类样式是自己定义的，并且它们都不是

.btn

而不是

.btn group

将这些样式复制到您的

.filter按钮

类中。另请参见和中的我的注释。这对我有帮助。谢谢你们的评论，伙计们。谢谢你们的评论，但这仍然不起作用，除非我有一个.btn组的包装类，并给button.btn类。它很接近，但仍然不会对他们进行分组，除非实际给他们那些类名。很抱歉，它对你不起作用。如果编译时没有收到任何错误消息，并且在其他导入之后添加了该按钮，我无法想象它为什么不起作用。对我来说完美无瑕-（如果我没有弄错的话，唯一的方法是这样做，但它也会产生大量冗余的垃圾选择器。@七个阶段最多你摇滚…我不得不对你的要点做了两次更改，但最终我还是让它工作了。不过，你完全正确地估计了额外的开销，为未统一的输出增加了大约9KB。是的，这很好。）太酷了，几乎可以用了。有一些奇怪的事情发生了，比如按钮之间有2px的线条，而不是1px，以及缺少悬停效果。@jme11您需要更改什么？它解决了我提到的任何问题吗？

@import "bootstrap.less";
button {
    .btn-default();
    &:extend(.btn, .btn.btn-default all);
}
.filter:extend(.btn-group all) {}
.filter > button:extend(.btn-group > .btn all) {}
.filter button + button:extend(.btn-group .btn + .btn all) {}

<div class="filter">
  <button type="button">BUTTON ONLY</button>
  <button type="button">BUTTON ONLY</button>
  <button type="button">BUTTON ONLY</button>
</div>