1

我正在为我的 Emberjs 应用程序使用引导程序...我遍历一个数组以绘制我的复选框...但是我的脚本标签会影响内联复选框之间的间距...

 <div class="row-fluid">
     <script id="metamorph-933-start" type="text/x-placeholder"></script>       
        <label class="checkbox inline">     
        <input id="ember4029" class="ember-view ember-checkbox" type="checkbox">        
        Firstchance 
      </label>      
   <script id="metamorph-933-end" type="text/x-placeholder"></script><script id="metamorph-934-start" type="text/x-placeholder"></script>       
        <label class="checkbox inline">     
        <input id="ember4030" class="ember-view ember-checkbox" type="checkbox">        
        secondchance        
      </label>      
   <script id="metamorph-934-end" type="text/x-placeholder"></script><script id="metamorph-935-start" type="text/x-placeholder"></script>       
        <label class="checkbox inline">     
        <input id="ember4031" class="ember-view ember-checkbox" type="checkbox">        
        thirdchance     
      </label>      
   <script id="metamorph-935-end" type="text/x-placeholder"></script><script id="metamorph-936-start" type="text/x-placeholder"></script>       
        <label class="checkbox inline">     
        <input id="ember4032" class="ember-view ember-checkbox" type="checkbox">        
        finalchance     
      </label>      
   <script id="metamorph-936-end" type="text/x-placeholder"></script><script id="metamorph-937-end" type="text/x-placeholder"></script>


  </div>

这是间距不合适的小提琴，

http://jsfiddle.net/4XZMb/1249/

这是没有任何脚本标签的正确间隔小提琴

http://jsfiddle.net/4XZMb/1248/

我的问题是脚本标签如何影响我的风格......？？？

我怎样才能在不添加任何额外样式的情况下在这里获得适当的间距......？？

4

1 回答 1

3

“适当间隔”的版本在<label class="checkbox inline">其他标签之后有<label class="checkbox inline">标签。这些标签由 bootstrap 中的以下 CSS 设置样式：

.checkbox.inline + .checkbox.inline {
margin-left: 10px;
}

带有脚本标签的版本在标签标签周围插入了脚本标签。这可以防止标签标签匹配上面的选择器，并且它们会丢失左边距。一个简单的解决方法是将您自己的类添加到您自己的 CSS 中，例如

.fluid-row-checkbox {
margin-left: 10px;
}

然后将此类添加到您的第二个、第三个和第四个标签中：

<label class="checkbox inline fluid-row-checkbox">

还有其他可能更好的方法来解决这个问题，但这是最简单的。

于 2013-02-01T11:51:11.067 回答