<script> 干扰 bootstrap.css，解决方法？答案

【问题标题】：<script> disturbs bootstrap.css, workarounds?<script> 干扰 bootstrap.css，解决方法？
【发布时间】：2013-03-28 15:32:15
【问题描述】：

我真的很想使用 twitter-bootstrap，以及他们的 12 列脚手架系统 - 有没有办法让它与例如 ember.js 和 handlebars.js 一起正常工作？我最近遇到了麻烦，因为插入的标签扰乱了 bootstrap.css 的描述，比如：first-child，我的具体情况如下所述。

所以问题：在使用例如 ember 和车把（包括标签）时，有没有办法正确避免干扰 bootstrap.css？

我的具体问题：<div class="span9"> 错过了下面的 CSS，因为标签取而代之的是，我认为...

<!-- Using a handlebars code block helper, {{#if}},  -->
<div class="row-fluid show-grid">
    {{#if controller.currentItem.isDuo}}
    <div class="span9">{{controller.currentItem.text}}</div>
    <div class="span3">{{controller.currentItem.imgText}}</div>
    {{/if}}
</div>

<!-- Rendered HTML from code above (stripped script tag's attributes for readability) -->
<div class="row-fluid show-grid">
    <script></script>
    <div class="span9"><script></script>00<script></script></div>
    <div class="span3"><script></script>Mask<script></script></div>
    <script></script>
</div>

bootstrap.css 中的 CSS 代码，与我的情况相关

.row-fluid [class*="span"]:first-child {
    margin-left: 0;
}

【问题讨论】：

如果在主 div 之外使用 {{#if}} 会怎样？
是的！这刚刚解决了我的情境问题，并且如果我使用 offset3 更新布局（例如让 margin-left: 变为不是 0 而是其他东西），它将起作用！谢谢！
此外，您可以使用 :first-of-type 覆盖 Bootstrap CSS，这将跳过导致所有问题的 javascript 转换。
啊，好的 geekingreen，嗯，你看到了一种选择 first-child-not-script 标签的方法吗？然后我可以替换 bootstrap.css 中出现的每一个第一个孩子并一劳永逸地解决问题

标签： css twitter-bootstrap ember.js handlebars.js

【解决方案1】：

如果通过在 diff 之后添加额外的 div 来解决此问题，如下所示：

<!-- Using a handlebars code block helper, {{#if}},  -->
<div class="row-fluid show-grid">
    {{#if controller.currentItem.isDuo}}
    <div>
        <div class="span9">{{controller.currentItem.text}}</div>
        <div class="span3">{{controller.currentItem.imgText}}</div>
    </div>
    {{/if}}
</div>

不是最优雅的解决方案，但它确实有效。

【讨论】：