我想在DOM中拥有相同引导标签标记的多个实例。不幸的是，似乎引导选项卡要求使用ID，这意味着相同的ID冲突，因为ID应该只在DOM树中出现一次。
示例，请参阅jsfiddle，最后的Foo Bar标签最终控制顶部标签窗格，因为我已经使用相同的ID向DOM添加了多个元素。
<div>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#foo" role="tab" data-toggle="tab">Foo</a></li>
<li role="presentation"><a href="#bar" role="tab" data-toggle="tab">Bar</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="foo">Foo content</div>
<div role="tabpanel" class="tab-pane" id="bar">Bar content</div>
</div>
</div>
<div>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#foo" role="tab" data-toggle="tab">Foo</a></li>
<li role="presentation"><a href="#bar" role="tab" data-toggle="tab">Bar</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="foo">Foo content</div>
<div role="tabpanel" class="tab-pane" id="bar">Bar content</div>
</div>
</div>
由于我使用Angular，与任何模板引擎一样，我可以使用范围变量区分模板中的ID，并确保该变量在我的应用程序中是唯一的。例如，使用{{id}}作为后缀。
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#foo{{id}}" role="tab" data-toggle="tab">Foo</a></li>
<li role="presentation"><a href="#bar{{id}}" role="tab" data-toggle="tab">Bar</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="foo{{id}}">Foo content</div>
<div role="tabpanel" class="tab-pane" id="bar{{id}}">Bar content</div>
</div>
我想知道是否有更好的方法可以解决这个问题？有没有什么方法可以配置bootstrap来使用基于类的选择器等？