2013-03-28 40 views
2

我真的很想使用twitter-bootstrap,並且他們的腳手架系統有12列 - 有沒有辦法讓這個工作正常使用例如ember.js和handlebars.js?我最近遇到了麻煩,因爲插入的標籤disterb bootstrap.css描述如:first-child,我的具體情況如下所述。<script>干擾bootstrap.css,解決方法?

所以問題:有沒有一種方法可以避免在使用例如包含標籤的包含標籤和句柄的工具時破壞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> 

CSS代碼中bootstrap.css,有關我的情況

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

如果您在該主div外使用'{{#if}}',該怎麼辦? – MilkyWayJoe

+1

是啊!這只是解決了我的情況問題,並且如果我以offset3爲例更新佈局(使邊距變爲零,變成不是0而是別的東西),將會起作用!謝謝! – consideRatio

+0

另外,你可以用下面的代碼覆蓋Bootstrap CSS:first-of-type會跳過導致所有問題的javascript轉換。 – geekingreen

回答

0

如果通過增加固定這一點,並額外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> 

不是最優雅的解決方案,但它的工作原理。