css - 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 更改为 $(".checkbox li").first().toggleClass('hidden')