<script> disturbs bootstrap.css, workarounds? - css

Question

I really would like to use twitter-bootstrap, and their scaffolding system with the 12 columns - is there a way to get this working properly with for example ember.js and handlebars.js? I recently ran into trouble, because inserted tags disterb bootstrap.css descriptions like :first-child, my specific situation described below.
So question: Is there a way properly avoid disterbing bootstrap.css when working with for example ember and handlebars, including tags?
My specific trouble: the <div class="span9"> misses out on the CSS below, because the tag picks it up instead, i think...
<!-- 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>
CSS-code in bootstrap.css, relevant to my situation
.row-fluid [class*="span"]:first-child {
margin-left: 0;
}

Answer 1

If fixed this by adding and extra div right after the diff like this:
<!-- 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>
Not the most elegant solution, but it works.