Bootstrap - 更改可见性时复选框组的布局间隔中断

Question

我有以下使用Bootstrap的场景。

问题是，当我改变第一个复选框的可见性时，它有点打破布局的间距。

<label for="">Filter</label> 
<div class="checkbox"> 
    <label> 
     <input type="checkbox"> Filter 1 
    </label> 
</div> 
<div class="checkbox"> 
    <label> 
     <input type="checkbox"> Filter 2 
    </label> 
</div> 
<div class="checkbox"> 
    <label> 
     <input type="checkbox"> Filter 3 
    </label> 
</div> 

您可以通过单击按钮来测试in this CodePen。

我建立了严重的HTML吗？或者我错过了这里的一些功能

Answer 1

.checkbox + .checkbox的margin-top设置为-5px，不管第一个复选框是否可见，该规则都适用。更好的解决方案是将边距添加到上面的文本（应该不是标签！），并且不为不同的复选框类设置不同的页边距。

<p>Filter</p> 
    <ul class="checkbox list-unstyled"> 
    <li> <label> <input type="checkbox"> Filter 1</label> </li> 
    <li> <label> <input type="checkbox"> Filter 2</label> </li> 
</ul> 

你需要改变你的JS到$（ “复选框里”）。第一个（）。toggleClass（ '隐藏'）