Question

我真的想使用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;
}

Answer 1

如果通过在差异之后添加和额外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>

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