I'm using Ember.js / handlebars to loop through a collection and spit out some items that I'd like bootstrap to handle nice and responsive like. Here is the issue:

The bootstrap-responsive css has some declrations in it like:

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

and

.row-fluid:before, .row-fluid:after {
    display: table;
content: "";
}

These rules seem to target the first children. When I loop through my collection in handlebars I end up with a bunch of metamorph code around my items:

<div class="row-fluid">
            {{#each restaurantList}}
                {{view GS.vHomePageRestList content=this class="span6"}}
            {{/each}}
</div>

Here is what is produced:

<div class="row-fluid">
        <script id="metamorph-9-start" type="text/x-placeholder"></script>
            <script id="metamorph-104-start" type="text/x-placeholder"></script>
              <div id="ember2527" class="ember-view span6">
                My View
              </div>
            <script id="metamorph-104-end" type="text/x-placeholder"></script>
            <script id="metamorph-105-start" type="text/x-placeholder"></script>
              <div id="ember2574" class="ember-view span6">
                My View 2
              </div>
            <script id="metamorph-105-end" type="text/x-placeholder"></script>
        <script id="metamorph-9-end" type="text/x-placeholder"></script>
</div>

So my question is this: 1. How can I tell css to ignore script tags? or 2. How can I edit the css bindings so that they skip over script tags when selecting the first or first child? or 3. How can I structure this so that Ember uses fewer/no metamorph tags?

Here is a fiddle: http://jsfiddle.net/skilesare/SgwsJ/