Question

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

 <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/

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

如何在不添加任何额外样式的情况下获得适当的间距......

Answer 1

“适当间隔”版本的<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">

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

脚本标记会影响引导程序中的复选框内联样式

1 个答案: