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（ '隱藏'）